从JavaScript中的数组创建具有3列的表

Question

I am trying to generate 3 columns in each row of a table from an Array, I am getting the result but, I am not able get 3 columns each row.

Could anyone help me spout the issue? please.

var tTable = "<table border=\"0\">";

var newArray = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"];
var newTr = "<tr>";
for (var i = 0; i < newArray.length; i++) {

 if(i % 3 == 0 ) {
 newTr += "<td>" + newArray[i] + "</td></tr><tr>";
 } else{
 newTr += "<td>" + newArray[i] + "</td>";
 }

}
newTr+="</tr>";
tTable += newTr;
document.write(tTable);

Current Result is

2
3   4   5
6   7   8
9   10  11
12  13  14
15

but, the expected result is

2   3   4
5   6   7
8   9   10
11  12  13
14  15

Any help on this how to solve this prob please?

Answer 1

Try something like this:

var tTable = "<table border=\"0\">";

var newArray = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"];
var newTr = "";
for (var i = 0; i < newArray.length; i++) {

  if(i % 3 == 0)
    newTr += (i > 0) ? "</tr><tr>" : "<tr>"


 newTr += "<td>" + newArray[i] + "</td>";

}
newTr+="</tr>";
tTable += newTr;
document.write(tTable);

As you start with element i = 0, you need to be careful because 0/3 = 0. In my example code, i check, like you, if we are at the the 3º element of the row, but i put a "special" condition when i = 0. So, in the first element we only create the row (), and for the next 3rd elements, we close the previous row and create a new one.

Answer 2

Your loop is evaulting to zero on that first run since your starting index is zero:

if(i % 3 == 0) //where i = 0, you'll get 0

This ends your row. You should fix that.

If you're going to "build" html in Javascript, you should really look into document.createElement. Building HTML out of strings will likely be unpredictable.

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

I won't explain everything else here, you can read the docs and figure it out -- this should solve any issues you might be having.

Answer 3

The error is with

if(i % 3 == 0 ) {
 newTr += "<td>" + newArray[i] + "</td></tr><tr>";
 }

Change the way you open and close the row.

 var tableBuilder = ''; var columns = 3; var data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; for (var index = 0; index < data.length; index++) { if (index % columns == 0) { if (index > 0)tableBuilder += '</tr>'; tableBuilder += '<tr>' } tableBuilder += '<td>'; tableBuilder += index; tableBuilder += '</td>'; } tableBuilder += '</tr>' document.getElementById("display").innerHTML = tableBuilder; 

 <table id="display"> </table> 

Answer 4

The first time your loop runs, i = 0. so 0 % 3 = 0. which triggers the end of the row. Make your loop start at one instead by setting i = 1, not 0.

for (var i = 1; i < newArray.length; i++) {