HTML code of the table with a only row:
<table class="table" id="myTable">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
Here JavaScript code:
//data:
var first_names = ['Jacob','Mark','Noé'];
var last_names = ['Thornton','Otto', 'Melo'];
var handle_names = ['@fat','@mdo','@noemelolocumber'];
//get table body:
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
for (let index = 0; index < first_names.length; index++){
//insert Row
tableRef.insertRow().innerHTML =
"<th scope='row'>" + (index + 2).toString()+ "</th>" +
"<td>" +first_names[index]+ "</td>"+
"<td>" +last_names[index]+ "</td>"+
"<td>" +handle_names[index]+ "</td>";
}
output
Top comments (4)
Worth noting that you do not need to reference the tbody directly if the table has only one tbody. It would be useful to see this tutorial using insertCell and avoiding the html in the script, as is outlined here developer.mozilla.org/en-US/docs/W...
Good observation, however, when using the function insertCell and createTextNode the css styles of the table are lost.
As far as this goes. that being that you know all of the table rows' content you want to add as a string to the tbody, so can just assign a string to the innerHTML property of an inserted row, fine. However, if you want to add an existing row object, say one clowned from another table, but don't want to revert to getting a string version of the existing row and appending it to the end of the innerHTML of the tbody's insertRow, how would you suggest doing that?
Also, how can I insert the new tr element between two existing comment nodes?