Question

我尝试使用javascript对象将新行插入到表中。

HTML看起来像这样：

＆＃13;

var table = document.getElementById("userTable");

var tr = document.createElement("tr");
var td = document.createElement("td");

var fn = document.createTextNode(user.firstname);
var ln = document.createTextNode(user.lastname);
var score = document.createTextNode(user.score);

td.appendChild(fn);
td.appendChild(ln);
td.appendChild(score);

tr.appendChild(td);
table.appendChild(tr);

＆＃13;

<table id="userTable">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Score</th>
  </thead>
  <tbody>
  </tbody>
</table>

＆＃13;

我遇到的问题是，目前它将所有数据添加到一个td中，而不是单独的td对应于标题。如何将数据附加到单独的单元格中？

Answer 1

  var table = document.getElementById("userTable");

  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  var td2 = document.createElement("td");
  var td3 = document.createElement("td");

  var fn = document.createTextNode(user.firstname);
  var ln = document.createTextNode(user.lastname);
  var score = document.createTextNode(user.score);

  td1.appendChild(fn);
  td2.appendChild(ln);
  td3.appendChild(score);

  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);

  table.appendChild(tr);

Answer 2

不使用insertRow()创建元素，而是使用函数，例如：
insertCell()和var user = { firstname: "foo", lastname: "bar", score: 30 } // getting reference to table var table = document.getElementById("userTable"); // creating table row -> where 1 is index var row = table.insertRow(1); // creating cells var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); // feeding data to the cells cell1.innerHTML = user.firstname cell2.innerHTML = user.lastname cell3.innerHTML = user.score来创建表格。

td {
  border: 1px solid green;
}

<table id="userTable">
  <thead>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Score</th>
  </thead>
  <tbody>
  </tbody>
</table>

net.tcp

Answer 3

您必须创建3个不同的td并在其中附加每个文本。

但是，请考虑使用更简单的insertRow()和insertCell()方法。您必须定位tbody元素，而不是表格：

HTML：

<table >
    <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Score</th>
    </thead>
    <tbody id="userTable">
    </tbody>
</table>

JS：（当然，你更喜欢在这里使用循环）

var table = document.getElementById("userTable");

var newRow = table.insertRow(-1);

var newCell = newRow.insertCell(-1);
var newText = document.createTextNode(user.firstname);
newCell.appendChild(newText);

var newCell = newRow.insertCell(-1);
var newText = document.createTextNode(user.lastname);
newCell.appendChild(newText);

var newCell = newRow.insertCell(-1);
var newText = document.createTextNode(user.score);
newCell.appendChild(newText);

https://jsfiddle.net/1sg3ojkq/

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell

Answer 4

var table = document.getElementById("userTable");
var tableBody = document.getElementById("tableBody");

  var tr = document.createElement("tr");
  var td = document.createElement("td");

  var fn = document.createTextNode("James");
  var ln = document.createTextNode("Bond");
  var score = document.createTextNode("007");

  td.appendChild(fn);
  td.appendChild(ln);
  td.appendChild(score);

  tr.appendChild(td);
  tableBody.appendChild(tr);

<table id="userTable">
    <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Score</th>
    </thead>
    <tbody id="tableBody">
    </tbody>
</table>

还有一件事需要创建3 tds

使用javascript在表中插入一行

4 个答案: