向空 tbody 元素添加行

Question

我有这样的桌子：

<table id="search-table" class="table">
  <thead>
    <tr>
      <th>Something</th>
      <th>Something2</th>
      <th>Something3</th>
      <th>Something4</th>
      <th>Something5</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

我有一个 API 调用，它返回我想要作为行和列放入空 tbody 元素中的数据。

var body = document.getElementsbyTagName("tbody");
var x = 0;

for (i = 0; i < APIcall.length; i++) {
  var createRow = body.insertRow();
  for (j = 0; j < 7; j++) {
    var x = createRow.insertCell(j);
  }
}

如果我在 thead 元素上 insertRow ，则会创建行，但当我尝试将其添加到 tbody 时则不会。可能我只是误会了什么。有什么建议我应该做什么吗？

Answer 1

你就快到了。

首先，正如 Rory 提到的，您的目标不是 DOM 中的

tbody

。 您可以通过将第一行替换为以下内容来解决此问题：

var body = document.querySelector('#search-table tbody')

它的作用是这样的：它查找 ID 为

search-table

和后代

<tbody>

的元素并返回引用。

你的代码将运行没有错误，但我对结果感到困惑。 在第二行中，您有

var x = 0

，但稍后我也可以看到

var x = createRow.insertCell(j);

。 （第二个

x

将为您提供对新

<td>

元素的引用）。

希望有帮助。

Answer 2

var html ='';
for (i = 0; i < APIcall.length; i++) {`enter code hereenter code here
  html += '<tr><td>' + APIcall[i].somthing + '</td><td>'+ APIcall[i].somthing + '</td>' +
    '<td>' + APIcall[i].somthing + '</td>' + < td > '+APIcall[i].somthing+' </td>'+
  '<td>' + APIcall[i].somthing + '</td></tr>';

}
$('#search-table > tbody').append(html);

enter code here

Answer 3

如果您的标记中有多个 tbody，则必须专门针对您的 tbody，因为 getElementsByTagName 返回一组元素。

对于示例：

var tbodies = document.getElementsByTagName ("tbody");
var targetTbody = tbodies[0];

或者如果您想将您的内容添加到多个 tbodies，您可以循环 tbodies。