CODEWITHSUNDEEP
javascriptinternet-explorerhtml-table
Cam
Cam

Reputation: 15234

Add to a table with Javascript

I have a table which looks like this:

<table id='t'>
    <thead>
        ....
    </thead>
    <tbody id='t_tbody'>
    </tbody>
</table>

I want to use Javascript to add this (for example) to t_tbody:

<tr>
    <td>Name</td>
    <td>Points</td>
    <td>Information</td>
</tr>

How can I do this? I need a function which adds the above to t_tbody.

Note that simply using 

document.getElementById('t_tbody').innerHtml+="<tr>...</tr>"

works fine in Firefox, but not in IE.

Also note that I need to use raw Javascript (i.e. no frameworks) for this project, as I am finishing a project which has already been mostly completed using raw Javascript.

Upvotes: 1

Views: 185

Answers (2)

nemetroid
nemetroid

Reputation: 2159

The answer by Gregoire is indeed the most "correct" way of doing this, however do note that IE does not seem to complain if you are editing innerHTML of elements not yet in the DOM. Thus the solution could be shortened to:

var tr = document.createElement('tr');

tr.innerHTML = "<td>Name</td><td>Points</td><td>Information</td>";

document.getElementById('t_tbody').appendChild(tr);

Upvotes: 2

Gregoire
Gregoire

Reputation: 24832

var tr = document.createElement("tr");

var td = document.createElement("td");
td.innerHTML = "Name";
tr.appendChild(td);

var td2 = document.createElement("td");
td2.innerHTML = "Points";
tr.appendChild(td2);

var td3 = document.createElement("td");
td3.innerHTML = "Information";
tr.appendChild(td3);

document.getElementById('t_tbody').appendChild(tr);

Upvotes: 4

Related Questions