Create dynamic html table using javascript from simple array

Question

I want to write some JavaScript to create a simple HTML table from an array that just contains numbers:

var array = [1,2,3,4,5,6,7,8,9,10];

The table should look like this:

1 2 3 4 5
6 7 8 9 10

But the JavaScript code should be dynamic depending on the arrays size (always a factor of 5 though).

I've tried a lot of stuff but it never works the way i want it to. What would be the easiest way to achieve this?

This is one of my tries.

var tableStart = "<table border>";
for (i = 0; i < arraySize/5; i++){
  var tableMiddle = "<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"
  if (arraySize/5 >= 2) {
    tableMiddle = tableMiddle + tableMiddle;
  }
};
var tableEnd = "</table>";
var table = tableStart.concat(tableMiddle, tableEnd);

as well as

var result = "<table border=1>";
for(var i=0; i<2; i++) {
    result += "<tr>";
    for(var j=0; j<array.length; j++){
        result += "<td>"+array[i]+"</td>";
    }
    result += "</tr>";
}
result += "</table>";

this one just results in two values of the array being displayed though a lot of times.

Hi @Alexander - welcome to SO. Can you show code you've tried so far? — itamar
– itamar, Commented May 1, 2018 at 9:17

Nina Scholz · Accepted Answer · 2018-05-01 09:29:54Z

9

You could iterate the array and build a new row if the remainder with 5 is zero.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    tr;

array.forEach((v, i) => {
    var td = document.createElement('td');
    
    if (!(i % 5)) {
        tr = document.createElement('tr');
        document.getElementById('table0').appendChild(tr);
    }
    td.appendChild(document.createTextNode(v));
    tr.appendChild(td);
});

<table id="table0"></table>

answered May 1, 2018 at 9:29

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taylor Rahul · Accepted Answer · 2018-05-01 09:38:09Z

1

var array = [1,2,3,4,5,6,7,8,9,10];

var result = "<table border=1>";
result += "<tr>";
for (var j = 0; j < array.length; j++) {
  result += "<td>" + array[j] + "</td>";
  if ((j + 1) % 5 == 0) {
    result += "</tr><tr>";
  }
}
result += "</tr>";
result += "</table>";

document.body.innerHTML = result;

Please give it a try if that works

edited May 1, 2018 at 9:38

answered May 1, 2018 at 9:30

Taylor Rahul

7397 silver badges20 bronze badges

Comments

itamar · Accepted Answer · 2018-05-01 13:45:08Z

0

How about trying something like this? Explanations in the code. Also, untested so you might need to make some adjustments.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// start the table
var table = document.createElement("table");
var currentRow;
for (var i = 0; i < array.length; i++) {
  // put items in.
  var item = document.createElement("td");
  item.innerHTML = array[i];
  // if we are at the 
  if (i % 5 === 0) {
    // if it's not the first time you're creating row - first put the prev row into the table, then reassign it to a new table row.
    if (typeof currentRow !== 'undefined') table.appendChild(currentRow);
  currentRow.appendChild(item);

    currentRow = document.createElement("tr");
  }

}
// put the table into the body element, for example.
document.getElementsByTagName('body')[0].appendChild(table);

edited May 1, 2018 at 13:45

answered May 1, 2018 at 9:33

itamar

3,9775 gold badges37 silver badges61 bronze badges

1 Comment

Andrew Bone Over a year ago

(1 % 5 === 0) will always be false

Collectives™ on Stack Overflow

Create dynamic html table using javascript from simple array

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related