如何使用给定行的html表中的输入字段创建动态行

Question

我是 Html 和 javascript 的新手。我想在单击按钮时在表格中创建带有输入字段的动态行，该行数来自用户。在我的代码中，行是动态创建的，但它没有附加上一个。它是新鲜创建的。但是，如果表已经创建，我想追加行。

这是我的代码：

function createTable() {
  var a;

  a = document.getElementById('tb1').value;

  if (a == "") {
    alert("Please enter some numeric value");
  } else {
    var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>";
    for (var i = 0; i < a; i++) {
      rows += "<tr><td><input type='text' name='" + "name".concat(i+1) + "'></td><td><input type='text' name='" + "quantity".concat(i+1) + "'></td><td><input type='text' name='" + "qtype".concat(i+1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i+1) + "'></td></tr>";
    }

    document.getElementById("table").innerHTML = rows;
  }
}

div {
  background: red;
  margin: 5px;
}

table {
  border: 2px solid black;
}

td {
  padding: 10px;
  border: 1px solid lightgrey;
}

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <input type="text" id="tb1"/>
    <button type="button" onclick='createTable()'>Click Me!</button>
    <table id="table" class="order-table table"  name="table1" required>
    </table>
  </body>
</html>

请大家帮忙！

提前谢谢..

Answer 1

使用Element.appendChild 而不是innerHTML

• Element.firstChild 将返回元素的 first-child。
• querySelectorAll 将根据指定的选择器返回 NodeList。
• Element.appendChild 将在元素中追加新的Node，而不影响元素中的现有内容。

function createTable() {
  var a = document.getElementById('tb1').value;
  if (a == "") {
    alert("Please enter some numeric value");
  } else {
    var th = document.querySelectorAll('#table th');//To check whether `TD` is appended in table or not!
    if (!th.length) {
      //If not appended, then append TD in table
      var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>";
      var table = document.createElement('table');
      table.innerHTML = rows;
      document.getElementById("table").appendChild(table.firstChild);
    }

    for (var i = 0; i < a; i++) {
      var elems = '';
      elems += "<tr><td><input type='text' name='" + "name".concat(i + 1) + "'></td><td><input type='text' name='" + "quantity".concat(i + 1) + "'></td><td><input type='text' name='" + "qtype".concat(i + 1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i + 1) + "'></td></tr>";
      var table = document.createElement('table');
      table.innerHTML = elems;
      document.getElementById("table").appendChild(table.firstChild);
    }
  }
}

div {
  background: red;
  margin: 5px;
}
table {
  border: 2px solid black;
}
td {
  padding: 10px;
  border: 1px solid lightgrey;
}

<input type="text" id="tb1" />
<button type="button" onclick='createTable()'>Click Me!</button>
<table id="table" class="order-table table" name="table1" required>
</table>

Answer 2

您所做的是每次都为表格设置新值。您实际上想要做的是使用“appendChild”函数将数据附加到表中。这也可以使用

更轻松地创建

这里是一个工作小提琴（使用 js appendChild）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            background: red;
            margin: 5px;
        }

        table {
            border: 2px solid black;
        }

        td {
            padding: 10px;
            border: 1px solid lightgrey;
        }

    </style>

    <script>

        function createTable() {
            var a;

            a = document.getElementById('tb1').value;

            if (a == "") {
                alert("Please enter some numeric value");
            } else {
                var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>";
                for (var i = 0; i < a; i++) {
                let tr = document.createElement("tr");
                tr.innerHTML = "<td><input type='text' name='" + "name".concat(i+1) + "'></td><td><input type='text' name='" + "quantity".concat(i+1) + "'></td><td><input type='text' name='" + "qtype".concat(i+1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i+1) + "'></td>";
                document.getElementById("table").appendChild(tr);
                }                
            }
        }
    </script>
</head>
<body>
<input type="text" id="tb1"/>
<button type="button" onclick='createTable()'>Click Me!</button>
<table id="table" class="order-table table"  name="table1" required>
</table>
</body>
</html>

我建议学习使用 jquery。无论如何，这里有一些关于我提到的功能的信息： jquery 及其“追加”功能。

关于 js appendChild 的信息 - http://www.w3schools.com/jsref/met_node_appendchild.asp jquery 追加 - http://api.jquery.com/append/

Answer 3

首先，您在包装th 时缺少<tr></tr>，将th 包装在tr 中，对于新的rows 附加previous row，您必须使用insertRow 属性的JavaScript。

这是你修改后的 sn-p

谢谢

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            background: red;
            margin: 5px;
        }

        table {
            border: 2px solid black;
        }

        td {
            padding: 10px;
            border: 1px solid lightgrey;
        }

    </style>

    <script>

        function createTable() {
            var a;

            a = document.getElementById('tb1').value;
var length = document.getElementById('table').rows.length;
            if (a == "") {
                alert("Please enter some numeric value");
            } else {
              if(length > 1){
                
                var table = document.getElementById("table");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(length);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
                cell1.innerHTML = "<input type='text' name='" + "name".concat(length+1) + "'>";
                 cell2.innerHTML = "<input type='text' name='" + "name".concat(length+1) + "'>";
                 cell3.innerHTML = "<input type='text' name='" + "name".concat(length+1) + "'>";
                 cell4.innerHTML = "<input type='text' name='" + "name".concat(length+1) + "'>";
              } else {
                var rows = "<tr><th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th></tr>";
                for (var i = 0; i < a; i++) {
                    rows += "<tr><td><input type='text' name='" + "name".concat(i+1) + "'></td><td><input type='text' name='" + "quantity".concat(i+1) + "'></td><td><input type='text' name='" + "qtype".concat(i+1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i+1) + "'></td></tr>";
                }

                document.getElementById("table").innerHTML = rows;
                }

            }
        }
    </script>
</head>
<body>
<input type="text" id="tb1"/>
<button type="button" onclick='createTable()'>Click Me!</button>
<table id="table" class="order-table table"  name="table1" required>
</table>
</body>
</html>