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

我不是HTML专家，但是：

我认为您必须使用 element .appendChild（）追加创建的孩子。您不应使用innerHTML，而应使用文档对象模型中内置的方法。

Answer 2

技巧是遍历数据并在插入数据之前使用UPDATE创建一行。您可以在此示例中看到insertRow元素为空，并且每个tbody元素都是动态创建的。

tr

Answer 3

正如其他响应者所提到的，您需要使用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 Interface）是一个很好的参考。