How To Create A Table Using A Loop?

The individual table rows are giving me a problem. I have created what I want using divs but I need to use a table instead of divs. My table has 220 cells, 10 rows, and 22 columns.

Solution 1:

You can do this with nested loops - one to add cells to each row and one to add rows to the table. JSFiddle

var table = document.createElement('table'), tr, td, row, cell;
for (row = 0; row < 10; row++) {
    tr = document.createElement('tr');
    for (cell = 0; cell < 22; cell++) {
        td = document.createElement('td');
        tr.appendChild(td);
        td.innerHTML = row * 22 + cell + 1;
    }
    table.appendChild(tr);
}
document.getElementById('container').appendChild(table);

Alternatively, you can create an empty row of 22 cells, clone it 10 times, and then add the numbers to the cells.

var table = document.createElement('table'),
    tr = document.createElement('tr'),
    cells, i;
for (i = 0; i < 22; i++) { // Create an empty row
    tr.appendChild(document.createElement('td'));
}
for (i = 0; i < 10; i++) { // Add 10 copies of it to the table
    table.appendChild(tr.cloneNode(true));
}
cells = table.getElementsByTagName('td'); // get all of the cellsfor (i = 0; i < 220; i++) {               // number them
    cells[i].innerHTML = i + 1;
}
document.getElementById('container').appendChild(table);

And a third option: add the cells in a single loop, making a new row every 22 cells.

var table = document.createElement('table'), tr, td, i;
for (i = 0; i < 220; i++) { 
    if (i % 22 == 0) { // every 22nd cell (including the first)
        tr = table.appendChild(document.createElement('tr')); // add a new row
    }
    td = tr.appendChild(document.createElement('td'));
    td.innerHTML = i + 1;
}
document.getElementById('container').appendChild(table);

Edit - how I would do this nowadays (2021)... with a helper function of some kind to build dom elements, and using map.

functionmake(tag, content) {
  const el = document.createElement(tag);
  content.forEach(c => el.appendChild(c));
  return el;
}

document.getElementById("container").appendChild(make(
    "table", [...Array(10).keys()].map(row =>make(
      "tr", [...Array(22).keys()].map(column =>make(
        "td", [document.createTextNode(row * 22 + column + 1)]
    ))
  ))
));

Solution 2:

There are a lot of ways to do this, but one I've found to be helpful is to create a fragment then append everything into it. It's fast and limits DOM re-paints/re-flows from a loop.

Take a look at this jsbin example.

Here's the modified code:

functionnewNode(node, text, styles) {
  node.innerHTML = text;
  node.className = styles;
  return node;
}

var fragment = document.createDocumentFragment(),
  container = document.getElementById("container");

for(var i = 1; i <= 10; i++) {
  var tr = document.createElement("tr");
  var td = newNode(document.createElement("td"), i, "cell");
  tr.appendChild(td);
  fragment.appendChild(tr);
}

container.appendChild(fragment);

You can modify whatever you want inside the loop, but this should get you started.

Solution 3:

That's because the DOM magically wraps a <tbody> element around stray table rows in your table, as it is designed to do. Fortunately, you can rewrite your loop in a way that will add all of those table rows at once, rather than one at a time.

The simplest solution to achieve this would be to store a string variable, and concatenate your rows onto that. Then, after you've concatenated your rows together into one string, you can set the innerHTML of your table element to that one string like so:

<script>
(function() {
    var rows = '';
    for( var i = 0; i <= 10; i++ )
    {
        rows += '<tr id = "row' + i + '"><td>...</td></tr>';
    }
    document.getElementById( 'table' ).innerHTML = rows;
}());
</script>

Here's a JSFiddle that demonstrates what I've just written. If you inspect the HTML using your browser's developer tools, you'll notice that one (and only one) tbody wraps around all of your table rows.

Also, if you're wondering, the odd-looking function which wraps around that code is simply a fancy way of keeping the variables you've created from becoming global (because they don't need to be). See this blog post for more details on how that works.

Solution 4:

please check this out. This is a very simple way to create a table using js and HTML

<body><tablecellspacing="5" ><thead><tr><td>Particulate count</td><td>Temperature</td><td>Humidity</td></tr></thead><tbodyid="xxx"></tbody></table><script>for (var a=0; a < 2; a++) {
            var table1 = document.getElementById('xxx');
            var rowrow =  document.createElement('tr');
        
            for ( i=0; i <1; i++) {
                var cell1  =  document.createElement('td');
                var text1 = document.createTextNode('test1'+a);

                var cell2  =  document.createElement('td');
                var text2 = document.createTextNode('test2'+a);

                var cell3  =  document.createElement('td');
                var text3 = document.createTextNode('test3'+a);

                cell1.appendChild(text1);
                rowrow.appendChild(cell1);

                cell2.appendChild(text2);
                rowrow.appendChild(cell2);

                cell3.appendChild(text3);
                rowrow.appendChild(cell3);
            }
            table1.appendChild(rowrow);
        }
    </script></body></html>