Question

我正在尝试动态地向表中添加行，但它会连接两个文本框的数据，然后将其添加到第一个<td>，这可能是什么问题？

function AddDataToTable() {
  var id = document.getElementById("id1").value;
  var firstname = document.getElementById("firstname").value;
  var trNode = document.createElement("tr");
  var tdNode = document.createElement("td");
  trNode.appendChild(tdNode);
  var trID = document.createTextNode(id);
  var trFirstName = document.createTextNode(firstname);
  tdNode.appendChild(trID);
  tdNode.appendChild(trFirstName);
  document.getElementById("productable").appendChild(trNode);
}

<table id="productable" border="1">
  <tr>
    <th>ID</th>
    <th>Item</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Shoes</td>
  </tr>
</table>
<br/>
<input type="text" name="id" id="id1">
<input type="text" name="firstname" id="firstname">
<input type="button" onclick="AddDataToTable()" value="Add" />

Answer 1

需要创建两个td元素并将文本节点分别追加两次。

＆＃13;

function AddDataToTable() {
  var productable = document.getElementById("productable");
  var id = document.getElementById("id1").value;
  var firstname = document.getElementById("firstname").value;
  var trNode = document.createElement("tr");
  // creating a delete button.
  var btn = document.createElement("BUTTON");
  btn.innerHTML = 'delete';
  btn.addEventListener("click", function () {
    
    productable.removeChild(trNode);
  });
  
  var tdNode1 = document.createElement("td");
  var tdNode2 = document.createElement("td");
  trNode.appendChild(tdNode1);
  trNode.appendChild(tdNode2);
  trNode.appendChild(btn);
  var trID = document.createTextNode(id);
  var trFirstName = document.createTextNode(firstname);
  tdNode1.appendChild(trID);
  tdNode2.appendChild(trFirstName);
  document.getElementById("productable").appendChild(trNode);
}

＆＃13;

#productable,
th,
td {
  border: 1px dotted grey;
}
td {
  padding: 20px;
}
th {
  text-align: center;
}

＆＃13;

<title>Table</title>

<body>
  <table id="productable">
    <tr>
      <th>ID</th>
      <th>Item</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Shoes</td>
    </tr>
  </table>
  <br/>
  <input type="text" name="id" id="id1">
  <input type="text" name="firstname" id="firstname">
  <input type="button" onclick="AddDataToTable()" value="Add" />
</body>

＆＃13;

动态地向表中添加数据

1 个答案: