AJAX Script deleting table headers - php

Question

I've got a script on my website which checks for new database entries every second and updates puts them into a table.
I'm having a problem where the script is deleting the table headers from the page. They still appear in the source code (Right clicking and displaying page source), but they don't appear visible to the user.
The problem seems to lie within "while (tbl.lastChild != tbl.firstChild) { tbl.removeChild(tbl.lastChild); }", but if I remove this line of code, the script will continuously display the same data, over and over again. For example, if I have name 1, name 2 and name 3 in the database. All three will be displayed, and then repeated.
How can I display the table headers, while stopping the data from repeating?
My full script code is:
function tick() {
var xhttp = new XMLHttpRequest();
xhttp.onload = (function() {
var data = JSON.parse(xhttp.responseText);
var tbl = document.getElementById("reports");
while (tbl.lastChild != tbl.firstChild) { tbl.removeChild(tbl.lastChild); }
function cell(data) {
var c = document.createElement("td");
c.appendChild(document.createTextNode(data));
return c;
}
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
row.appendChild(cell(data[i]["id"]));
row.appendChild(cell(data[i]["firstname"]));
row.appendChild(cell(data[i]["lastname"]));
row.appendChild(cell(data[i]["date"]));
var a = document.createElement("a");
var c = document.createElement("td");
a.href = "view.php?id=" + data[i]["id"];
a.appendChild(document.createTextNode("View ID"));
c.appendChild(a);
row.appendChild(c);
tbl.appendChild(row);
setTimeout(tick, 1000);
}
});
xhttp.open("GET", "reportload.php", true);
xhttp.send("");
}
addEventListener("DOMContentLoaded", function() {
tick();
});

Answer 1

You can try create next html table and use it:
<table>
<thead>
<tr>
<th>title1</th>
<th>title1</th>
</tr>
</thead>
<tbody id="reports">
<tr>
<td>value</td>
<td>value</td>
</tr>
</tbody>
</table>

Answer 2

The childern of the HTML node are not only TRs, but also any portion of whitespaces between them, so Your loop probably deletes all TRs and leaves only the first portion of whitespaces.
I would suggest to put header in THEAD and data rows in TBODY and then operate only on TBODY, leaving the header intact.