CODEWITHSUNDEEP
javascriptarrays
Stephen Gevanni
Stephen Gevanni

Reputation: 43

Put each element of an array, in a cell of a table created by Javascript

I've created a table using javascript. However, I would like each of the cells (td) in the table to display each element in my array, in order of the elements in the array. This is the array with the words in it:

var Myarray=['Anime','Demon','Black','Death','Beast','Tokyo','Manga','Titan','Ghoul'];

Here is my Javascript code so far:

function display_array(Myarray){
        var body = document.body,
        tbl  = document.createElement('table');
    tbl.style.width  = '100px';
    tbl.style.border = "1px solid black";
    var arrayLength = Myarray.length;
    var sqroot=Math.sqrt(arrayLength);

    for(var i = 0; i < sqroot; i++){
        var tr = tbl.insertRow();
        for(var j = 0; j < sqroot; j++){
            if(i == sqroot && j == sqroot){
                break;
            } else {
                var td = tr.insertCell();


                for(var q = 0; q < arrayLength; q++){
                    td.appendChild(document.createTextNode(Myarray[q]));
                }

                td.style.border = "1px solid black";
                if(i == 1 && j == 1){
                    td.setAttribute('rowSpan', '1');
                }
            }
        }
    }
    body.appendChild(tbl);

}

With this code, my table looks like this:

____________________________________________________________________________________________________________________________________________
 |AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|
--------------------------------------------------------------------------------------------------------------------------------------------
 |AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|
--------------------------------------------------------------------------------------------------------------------------------------------
 |AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|
--------------------------------------------------------------------------------------------------------------------------------------------

I would like my table to look like this:

___________________
|Anime|Demon|Black|
-------------------
|Death|Beast|Tokyo|
-------------------
|Manga|Titan|Ghoul|
-------------------

Upvotes: 2

Views: 563

Answers (3)

Drazen Bjelovuk
Drazen Bjelovuk

Reputation: 5482

I can't understand why you're using sqroot, but if you want a 3 column table containing each item in your array, something like this would do it:

var tr, td;
for (var i = 0; i < arrayLength; i++) {
    if (i % 3 === 0)
        tr = tbl.insertRow();
    td = tr.insertCell();
    td.appendChild(document.createTextNode(Myarray[i]));
}

Upvotes: 1

mario ruiz
mario ruiz

Reputation: 996

Create a variable outside your function called index 

var index =0;

Then replace your else code with 

            var td = tr.insertCell();
            td.appendChild(document.createTextNode(Myarray[index]));
            td.style.border = "1px solid black";
            if(i == 1 && j == 1){
                td.setAttribute('rowSpan', '1');
            }
            index++;

Upvotes: 0

bjb568
bjb568

Reputation: 11498

for(var q = 0; q < arrayLength; q++){
    td.appendChild(document.createTextNode(Myarray[q]))
}

This loops thru and create a textNode for each element. If you want one element use Myarray[index]; in this case index is i * sqroot + j.

td.appendChild(document.createTextNode(Myarray[i * sqroot + j]))

Upvotes: 0

Related Questions