javascript - Javascript 填充表

Question

如何以正确的方式使用 javascript 填充表格？

function loadTableData() {

  //0: Date
  //1: Name

  var row = document.getElementById("test");

  var x = row.insertCell(0);
  x.innerHTML = "10/17/2018";

  var x = row.insertCell(1);
  x.innerHTML = "john doe";

}

<table id="myTable" class="table table-borderless table-striped table-earning">
  <thead>
    <tr>
      <th>date</th>
      <th>file name</th>
    </tr>
  </thead>
  <tbody>
    <tr id="test"></tr>
  </tbody>
</table>
<script>loadTableData();</script>

我当前的代码填充了前两个单元格，但我想移至下一列并填充另外两个单元格。我不确定如何以正确的方式做到这一点。

电流输出

Answer 1

insertRow诀窍是在插入数据之前循环遍历数据并用于创建一行。您可以看到tbody此示例中的元素是空的，并且每个tr元素都是动态创建的。

<table id="myTable" class="table table-borderless table-striped table-earning">
  <thead>
    <tr>
      <th>date</th>
      <th>file name</th>
    </tr>
  </thead>
  <tbody id="testBody"></tbody>
</table>
<script>
  const items1 = [
    { date: "10/17/2018", name: "john doe" },
    { date: "10/18/2018", name: "jane doe" },
  ];
  const items2 = [
    { date: "10/17/2019", name: "john doe" },
    { date: "10/18/2019", name: "jane doe" },
  ];
  function loadTableData(items) {
    const table = document.getElementById("testBody");
    items.forEach( item => {
      let row = table.insertRow();
      let date = row.insertCell(0);
      date.innerHTML = item.date;
      let name = row.insertCell(1);
      name.innerHTML = item.name;
    });
  }
  loadTableData(items1);
  loadTableData(items2);
  loadTableData([]);
</script>

Answer 2

正如其他响应者所提到的，您需要使用 DOM 处理文档。将所有内容视为它们在 HTML 中的元素。

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

var rowNode = document.createElement("tr");
var cellNode = document.createElement("td");
var textNode = document.createTextNode("John Doe");

cellNode.appendChild(textNode);
rowNode.appendChild(cellNode);
table.appendChild(rowNode);

对于与表 DOM 元素的进一步交互，W3C 规范（DOM 接口）是一个很好的参考。

Answer 3

I'm not an HTML expert, but:

I think you have to use element.appendChild() to append the child you have created. You shouldn't use the innerHTML, rather use the methods built into the Document Object Model.