Добавить строки в пустой элемент 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, строки создаются, но не тогда, когда я пытаюсь добавить его в tbody. Наверное, я просто что-то недопонимаю. Любые предложения, что я должен делать?

Answer 1

вы почти у цели.

Во-первых, как упоминал Рори, вы не нацелены на tbody в DOM. Это можно исправить, заменив первую строку следующим текстом:

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

Что это делает, так это: он ищет элемент с идентификатором search-table и потомком <tbody> и возвращает ссылку .

Ваш код будет работать без ошибок, но я не совсем понимаю, каков результат. Во второй строке у вас есть var x = 0, но позже я также вижу var x = createRow.insertCell(j);. (Второй x даст вам ссылку на новый элемент <td>).

Надеюсь, что поможет.

Answer 2

Если в разметке у вас более одного tbody, вам нужно нацелиться именно на них, потому что getElementsByTagName возвращает массив элементов.

для eyample:

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

или вы можете oop над телами, если вы хотите добавить свои вещи к нескольким телам.

Answer 3

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