HTML table TD in for loop not generating correctly

Question

Herro, i'm trying to generate a html table through Javascript, however the output is failing on me:

HTML:

<div id="racks" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="overflow: auto; display: block; height: 196.8px;" aria-labelledby="ui-accordion-accordion-header-2" role="tabpanel" aria-expanded="true" aria-hidden="false">
<table border="1">
<tbody>
<tr></tr>
</tbody>
</table>
<a onclick="alert(LSZ09 )" href="#">*</a>
<a onclick="alert(LSZ10 )" href="#">*</a>

</div>

Javascript:

document.getElementById("racks").innerHTML = "<table border='1'><tbody><tr>";
                        for (var i=0;i<16;i++)
                            {
                            document.getElementById("racks").innerHTML = document.getElementById("racks").innerHTML +"<td><a href='#' onClick='alert('"+jPunten[i].STATDEV+"')'>*</a></td>";
                            }
                            document.getElementById("racks").innerHTML = document.getElementById("racks").innerHTML + "</tr></table>";

Answer 1

You can update the #racks element at the end. no need to update it each iteration. And also you had a problem in the quote of the onClick event

Try something like this:

html = "<table border='1'><tbody><tr>";
for (var i=0;i<16;i++) {
  html += "<td><a href='#' onClick='alert(\""+jPunten[i].STATDEV+"\")'>*</a></td>";
}
html += "</tr></table>";
document.getElementById("racks").innerHTML = html;