Question

我是Html和javascript的新手。我想在表格中创建带有输入字段的动态行，同时单击按钮，即用户给出的行数。在我的代码中，行动态创建但不附加prevoius行。它创造了新鲜。但是，如果已经创建了表，我想追加行。

这是我的代码：

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

<!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>

＆＃13;

请有人帮忙！

提前致谢..

Answer 1

使用Element.appendChild代替innerHTML

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

＆＃13;

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);
    }
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，您在<tr></tr>包裹时遗失th，th包裹tr，新rows追加{{} 1}}你必须使用javascript的previous row属性。

以下是您修改过的代码段

由于

insertRow

Answer 3

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

创建，甚至更容易

这是改变的工作小提琴（使用js appendChild）：

{{1}}

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

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

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

3 个答案: