Comparing ways of creating tables with javascript

by jtratner

HTML

<div id="expected" class="example">
<h2>Expected Result</h2>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
        <td>1</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
        <td>2</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>
</div>
<div id="insertRow" class="example">
  <h2>With insert rows (reversed order) </h2>
</div>
<div id="appendChild" class="example">
  <h2>With append child</h2>
</div>

CSS

table, td, th, tr {
    border: 1px black solid;
    text-align: center;
}
td {
    width: 30px;
}
thead > tr > td, thead > tr > th {
    font-weight: bold;
    border-bottom-width: 3px;
}
td:first-child {
    font-weight: bold;
}
h2 {
    font-size: 1.1em;
    font-weight: bold;
}
.example {
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
}

JavaScript

var data = [
    {"a": 1, "b": 2, "c": 3},
    {"a": 4, "b": 5, "c": 6},
    {"a": 7, "b": 8, "c": 9}
],
    keys = ["a", "b", "c"],
    insertDiv = document.getElementById("insertRow");

// insert a table
var insertTable = insertDiv.appendChild(document.createElement("table")),
    thead = insertTable.createTHead(),
    thRow = thead.insertRow(),
    tbody = insertTable.createTBody();

thRow.insertCell().innerText = "#";
for (var i = 0, l = keys.length; i < l; i ++) {
    var k = keys[i];
    thRow.insertCell().innerText = k;
}

for (var i = 0, l = data.length; i < l; i ++) {
    var rowData = data[i],
        row = tbody.insertRow();
    row.insertCell().innerText = i;
    for (var j = 0, l = keys.length; j < l; j ++) {
        var elem = rowData[keys[j]];
        row.insertCell().innerText = elem;
    }
}

// now do the same thing, but using appendChild
var byChildTable = document.createElement("table");
byChildTable.setAttribute("class", "table");
thead = byChildTable.appendChild(document.createElement("thead"));
thRow = thead.appendChild(document.createElement("tr"));
thRow.appendChild(document.createElement("td")).innerText = "#";
for (var i = 0, l = keys.length; i < l; i ++) {
    var key = keys[i];
    thRow.appendChild(document.createElement("td")).innerText = key;
}
tbody = byChildTable.appendChild(document.createElement("tbody"));
for (var i = 0, l = data.length; i < l; i ++) {
    var rowData = data[i],
        row = tbody.appendChild(document.createElement("tr"));
    row.appendChild(document.createElement("td")).innerText = i;
    for (var j = 0, l = keys.length; j < l; j ++) {
        var elem = rowData[keys[j]];
        row.appendChild(document.createElement("td")).innerText = elem;
    }
}
document.getElementById("appendChild").appendChild(byChildTable);