开发者

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>
  • thead is filled with content

  • tbody is empty

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 a开发者_如何学Godds 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.


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);


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);    
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜