How to correctly make a table inside a table javascript

Question

I have created ten separate tables in javascript using HTML tags. I now want to put those tables in a grid format so I thought putting them into another table would work. This code just makes an empty table appear. Any help? Thanks!

 document.getElementById('InstalledApps').innerHTML += '<table id="bigAppsTable" border="1"><td>';

    for (var i = 9; i>-1;i--){  
        document.getElementById('InstalledApps').innerHTML += '<table id="appsTable'+i+'" border="1"><tr></tr>';

        var thirdRow=document.getElementById("appsTable"+i).insertRow(1);
        if (the_data[i]['release'] != null){
        thirdRow.insertCell(-1).innerHTML="<b>Release: ";
        thirdRow.insertCell(-1).innerHTML=the_data[i]['release'];
        }
        var secondRow=document.getElementById("appsTable"+i).insertRow(1);
        secondRow.insertCell(-1).innerHTML="<b>Version: ";
        secondRow.insertCell(-1).innerHTML=the_data[i]['version'];

        var firstRow=document.getElementById("appsTable"+i).insertRow(1);
        firstRow.insertCell(-1).innerHTML="<b>Name:";
        firstRow.insertCell(-1).innerHTML=the_data[i]['name'];

        }

why you're not usiong `+=` here : `thirdRow.insertCell(-1).innerHTML=the_data[i]['release'];` ? — Ivan Chernykh, Sep 09 '13 at 14:45
might helpful http://stackoverflow.com/questions/14643617/create-table-using-javascript — usman allam, Sep 09 '13 at 14:48
Because it's a separate cell, so there's nothing there anyway, right? — Zach Lucas, Sep 09 '13 at 14:48

score 0 · Answer 1 · answered Sep 09 '13 at 14:48

0

Since you're dynamically creating tables, why not use the DOM API? (ie. not innerHTML)

Here is a good place to get your started: https://developer.mozilla.org/en-US/docs/Web/API/document.createElement

answered Sep 09 '13 at 14:48

Halcyon

57,230
10
89
128

score 0 · Answer 2 · answered Sep 09 '13 at 14:55

0

Try like this

var aTable = document.createElement('table');

for (var i = 0, tr, td; i < 9; i++) {
    tr = document.createElement('tr');
    td = document.createElement('td');
    td.appendChild(document.createTextNode("some text"));
    tr.appendChild(td);
    aTable.appendChild(tr);
}

//update with id
document.getElementById('table').appendChild(aTable);

answered Sep 09 '13 at 14:55

usman allam

274
1
5

After running that code, it says on the last line that the element is null...? – Zach Lucas Sep 09 '13 at 16:51
make sure you are correct id with respect to your real div or table ids. in above mentioned code i defined example id etc. – usman allam Sep 10 '13 at 09:56

How to correctly make a table inside a table javascript

2 Answers2