Entry
How do I add a row to a table?
How can I add a row to a table in IE5+ for an unparsed html string representing a row ("<tr class=fo
Apr 14th, 2000 10:08
Martin Honnen, dipster relly,
IE4+ and NN6 allow that with dom methods
var row = tableElement.insertRow(index);
var cell = tableRow.insertCell(index);
NN6 also allows addition of a row as unparsed html while IE4/5 are
reluctant to set the innerHTML of TABLE/TBODY/TR elements.
The following has example code adding a row with two columns to a table:
<HTML>
<HEAD>
<STYLE>
.js {
color: white;
background-color: orange;
}
</STYLE>
<SCRIPT>
function addRowDOM (tableID) {
// pass every cell content as a futher arg
var table =
document.all ? document.all[tableID] :
document.getElementById(tableID);
if (arguments.length > 1) {
var row = table.insertRow(table.rows.length);
if (document.all) {
for (var i = 1; i < arguments.length; i++) {
var cell = row.insertCell(i - 1);
cell.innerHTML = arguments[i];
}
}
else if (document.getElementById) {
//NN6 bug inserting cells in wrong sequence
for (var i = arguments.length - 1; i >= 1; i--) {
var cell = row.insertCell(arguments.length - 1 - i);
cell.appendChild(document.createTextNode(arguments[i]));
}
}
}
}
function addRowHTML (tableID, html) {
if (document.getElementById && !document.all) {
var table = document.getElementById(tableID);
var tbody = table.tBodies[table.tBodies.length - 1];
var range = document.createRange();
range.setStartAfter(tbody.lastChild);
var docFrag = range.createContextualFragment(html);
tbody.appendChild(docFrag);
}
}
</SCRIPT>
</HEAD>
<BODY>
<BUTTON
ONCLICK="addRowDOM
('table1', 'JavaScript.FAQTs.com', 'www.FAQTs.com');"
>
add row per DOM methods
</BUTTON>
<BUTTON
ONCLICK="addRowHTML('table1',
'<TR><TD>JavaScript.FAQTs.com<\/TD><TD>www.FAQTs.com<\/TD><\/TR>');"
>
add row as html
</BUTTON>
<TABLE ID="table1" BORDER="1" CLASS="js">
<TBODY>
<TR>
<TD>
JavaScript.FAQTs.com
</TD>
<TD>
www.FAQTs.com
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
