如何添加新的输入框？

问题描述 投票：0回答：1

我创建了一个输入字段，您可以通过按绿色按钮添加新的输入框。但是，当用户在输入框中键入内容（服务、数量或价格）并按绿色按钮时，第一个收件箱中的输入将被复制。当用户单击绿色按钮时，我希望出现一个空白输入框。 我知道问题出在我的 JS 中，但我无法弄清楚。有人可以帮忙吗？

function create_tr(table_id) {
  let table_body = document.getElementById(table_id),
    first_tr = table_body.firstElementChild
  tr_clone = first_tr.cloneNode(true);
  table_body.append(tr_clone);

  clean_first_tr(table_body.firstElementChild);

}

function clean_first_tr(firstTr) {
  let children = firstTr.children;

  children = Array.isArray(children) ? children : Object.values(childern);
  childern.forEach(x => {

    if (x !== firstTr.lastElementChild) {
      console.log(x.firstElementChild.value = '');
    }
  });
}

function remove_tr(This) {
  if (This.closest('tbody').childElementCount == 1) {
    alert("yo cant")
  } else {
    This.closest('tr').remove();
  }
}
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  background-color: rgb(107, 103, 103);
}

button {
  width: 20px;
  height: 20px;
}

.container {
  max-width: 900px;
  width: 100%;
  background-color: #ffffff;
  margin: auto;
  padding: 15px;
  box-shadow: 0 2px 20px #0001, 0 1px 6px #0001;
  border-radius: 5px;
  overflow-x: auto;
}

._table {
  width: 100%;
  border-collapse: collapse;
}

._table :is( th, td) {
  border: 1px solid #0002;
  padding: 8px 10px;
}


/* From feild design start*/

.form_control {
  border: 1px solid #0002;
  background-color: transparent;
  outline: none;
  font-family: 1rem;
  padding: 8px 12px;
  width: 100%;
  color: #333;
  /*font-family: ;*/
  transition: 0.3s ease-in-out;
}

.form_control ::placeholder {
  opacity: 0.5;
}

.form_contro:is(:focus):hover {
  box-shadow: inset 0 1px 6px #0002;
}

.add {
  background-color: #24b96f !important;
}

.warning {
  background-color: #ebba33 !important;
}

.primary {
  background-color: #259df2 !important;
}

.secondary {
  background-color: #00bcd4 !important;
}

.remove {
  background-color: #ff5722 !important;
}

.action_conatiner {
  display: inline-flex;
}

.action_conatiner>* {
  border: none;
  outline: none;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 8px 14px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.action_conatiner>*+* {
  background-color: red !important;
  border-left: 1px solid #fff5;
}

.action_conatiner>*:hover {
  filter: hue-rotate(-20deg) brightness(0.97);
  transform: scale(1.05);
  border-color: transparent;
  box-shadow: 0 2px 10px #0004;
  border-radius: 2px;
}

.action_conatiner>*:active {
  transition: unset;
  transform: scale(.99);
}


/* From feild design end*/
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add Remove</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <table class="_table">
      <thead>
        <tr>
          <th>Service</th>
          <th>QTY</th>
          <th>Price</th>
          <th width="50px">
            <div class="action_conatiner">
              <button class="add" onclick="create_tr('table_body')"></button>
            </div>
          </th>
        </tr>
      </thead>
      <tbody id="table_body">
        <tr>
          <td>
            <input type="text" class=" form_control" placeholder="website">
          </td>
          <td>
            <input type="number" class=" form_control" min="0" placeholder="0">
          </td>
          <td>
            <input data-type="currency" class=" form_control" placeholder="$0.00">
          </td>
          <td>
            <div class="action_conatiner">
              <button class="remove" onclick="remove_tr(this)">
                
                  </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

  </div>

  <script src="index.js"></script>
</body>
</html>

javascript
1个回答
0
投票

除了修复 

children
拼写错误之外，我可以看到您想要将新行添加到顶部并将其他行推到下方。为此，您需要使用 
prepend
而不是 
append
将 
tr_clone
添加到顶部。

这是完整的代码，其中包含解释更改的注释：

function create_tr(table_id) {
    let table_body = document.getElementById(table_id),
        first_tr = table_body.firstElementChild
    let tr_clone = first_tr.cloneNode(true);  // use let keyword
    table_body.prepend(tr_clone);  // use prepend to add the tr_clone to the top

    clean_first_tr(table_body.firstElementChild);
}

function clean_first_tr(firstTr) {
    let children = firstTr.children;
    
    // fixed childern to children
    children = Array.isArray(children) ? children : Object.values(children);
    children.forEach(x => {

        if (x !== firstTr.lastElementChild) {
            console.log(x.firstElementChild.value = '');
        }
    });
}

function remove_tr(This) {
    if (This.closest('tbody').childElementCount === 1) {
        alert("yo cant")
    } else {
        This.closest('tr').remove();
    }
}
* {
    box-sizing: border-box;
    padding: 0;
}

body {
    background-color: rgb(107, 103, 103);
}

button {
    width: 20px;
    height: 20px;
}

.container {
    max-width: 900px;
    width: 100%;
    background-color: #ffffff;
    margin: auto;
    padding: 15px;
    box-shadow: 0 2px 20px #0001, 0 1px 6px #0001;
    border-radius: 5px;
    overflow-x: auto;
}

._table {
    width: 100%;
    border-collapse: collapse;
}

._table :is( th, td) {
    border: 1px solid #0002;
    padding: 8px 10px;
}


/* From feild design start*/

.form_control {
    border: 1px solid #0002;
    background-color: transparent;
    outline: none;
    font-family: 1rem;
    padding: 8px 12px;
    width: 100%;
    color: #333;
    /*font-family: ;*/
    transition: 0.3s ease-in-out;
}

.form_control ::placeholder {
    opacity: 0.5;
}

.form_contro:is(:focus):hover {
    box-shadow: inset 0 1px 6px #0002;
}

.add {
    background-color: #24b96f !important;
}

.warning {
    background-color: #ebba33 !important;
}

.primary {
    background-color: #259df2 !important;
}

.secondary {
    background-color: #00bcd4 !important;
}

.remove {
    background-color: #ff5722 !important;
}

.action_conatiner {
    display: inline-flex;
}

.action_conatiner>* {
    border: none;
    outline: none;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 8px 14px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.action_conatiner>*+* {
    background-color: red !important;
    border-left: 1px solid #fff5;
}

.action_conatiner>*:hover {
    filter: hue-rotate(-20deg) brightness(0.97);
    transform: scale(1.05);
    border-color: transparent;
    box-shadow: 0 2px 10px #0004;
    border-radius: 2px;
}

.action_conatiner>*:active {
    transition: unset;
    transform: scale(.99);
}


/* From feild design end*/
<div class="container">
    <table class="_table">
        <thead>
        <tr>
            <th>Service</th>
            <th>QTY</th>
            <th>Price</th>
            <th width="50px">
                <div class="action_conatiner">
                    <button class="add" onclick="create_tr('table_body')"></button>
                </div>
            </th>
        </tr>
        </thead>
        <tbody id="table_body">
        <tr>
            <td>
                <input type="text" class=" form_control" placeholder="website">
            </td>
            <td>
                <input type="number" class=" form_control" min="0" placeholder="0">
            </td>
            <td>
                <input data-type="currency" class=" form_control" placeholder="$0.00">
            </td>
            <td>
                <div class="action_conatiner">
                    <button class="remove" onclick="remove_tr(this)">

                    </button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.