Creating Table with 3 column from an array in javascript

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

but, the expected result is

Any help on this how to solve this prob please?

David Rego · Accepted Answer · 2015-07-24 19:21:24Z

2

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.

answered Jul 24, 2015 at 19:21

David Rego

1591 silver badge5 bronze badges

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

Comments

Lordbalmon · Accepted Answer · 2015-07-24 21:08:15Z

1

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>

edited Jul 24, 2015 at 21:08

answered Jul 24, 2015 at 19:08

Lordbalmon

1,7121 gold badge16 silver badges32 bronze badges

1 Comment

User123 Over a year ago

could u pls tell me the solution?

Tim Jenkins · Accepted Answer · 2015-07-24 19:09:02Z

0

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++) {

answered Jul 24, 2015 at 19:09

Tim Jenkins

1115 bronze badges

Comments

dudewad · Accepted Answer · 2015-07-24 19:09:20Z

0

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.

edited Jul 24, 2015 at 19:09

answered Jul 24, 2015 at 19:04

dudewad

14.1k7 gold badges43 silver badges51 bronze badges

Collectives™ on Stack Overflow

Creating Table with 3 column from an array in javascript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related