I came across some other posts that discuss a similar issue using jQuery, but I'm determined to stick with pure JavaScript for this. My goal is to construct a table using Bootstrap, however, I've hit a roadblock when it comes to adding new data to the table. The table header gets created just fine, but the rows with the actual data end up below the header in an unorganized manner.
Here's the HTML:
<div id = specificFailureCountTable-js></div>
And here's the JavaScript code:
let filterText = 'machines';
let tableData = document.getElementById("specificFailureCountTable-js");
let data = [["machineA",15],["machineB",54],["machineC",26]];
// Create the table header
tableData.innerHTML = `
<table class="table table-striped" id = "myTable">
<thead>
<tr>
<th scope="col">${filterText}</th>
<th scope="col">Count</th>
</tr>
</thead>
<tbody>
`;
// Iterate over the data and add rows to the table
for(i = 0; i < data.length; i++){
tableData.innerHTML = tableData.innerHTML +
`<tr>
<th scope="row">${i}</th>
<td>${data[i][0]}</td>
<td>${data[i][1]}</td>
</tr>`
}
// Close off the table
tableData.innerHTML = tableData.innerHTML +
`</tbody>
</table>`
;