Загрузка отдельных <td>данных таблицы в разных строках с использованием JavaScript

Question

Когда я пытаюсь вызвать API и загрузить данные в таблицу, данные добавляются в той же строке.Но каждый данные должны быть добавлены в отдельной строке.Кстати, у меня есть только один <td> Как мне решить эту проблему?

HTML:

   <table class="table table-striped table-bordered" id="editable-datatable">
        <thead>
          <tr>
            <th class="footable-sortable"> Host 
                <span class="footable-sort-indicator"></span>
            </th>
          </tr>
        </thead>
        <tbody class="text-center" id="concat_here">

          <tr>
<td id="row1">
</td>
          </tr>
          </span>
        </tbody>
      </table>

JS:

if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
    obj = JSON.parse(xmlhttp.responseText);
    list_length = obj.log_ast.length;

    var i=0;
    for(i=0; i<list_length; i++)
    {
        document.getElementById('row1').innerHTML = document.getElementById('row1').innerHTML+'<tr>'+'<td>'+obj.log_ast[i].address+'</td>'+'</tr>';
    }
}

Answer 1

«Правильный способ» - создать строку таблицы, используя

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

var table = document.getElementById("editable-datatable")
var row = table.insertRow()

, а затем добавить ячейку в строку, используя

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

var cell = row.insertCell()

затем добавьте свой текст в ячейку, используя

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

cell.innerText = obj.log_ast[i].address

Answer 2

Полагаю, вы ищете именно этот фрагмент кода.

HTML

<table class="table table-striped table-bordered" id="editable-datatable">
<thead>
<tr>
<th class="footable-sortable"> Host 
  <span class="footable-sort-indicator"></span>
</th>
</tr>
</thead>
<tbody class="text-center" id="concat_here">

</span>
</tbody>
</table>

JS

if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
           {
             obj = JSON.parse(xmlhttp.responseText);
             list_length = obj.log_ast.length;
             var i=0;
             for(i=0; i<list_length; i++)
             {
                var htmlContent = '<td>'+obj.log_ast[i].address+'</td>';
                var refTbl =  document.getElementById('editable-datatable').getElementsByTagName('tbody')[0];
                var newRow   = refTbl.insertRow(refTbl.rows.length);
                newRow.innerHTML = htmlContent
             }
           }