Using JavaScript, how can I dynamically add content to an HTML table when performing some action like clicking on a button?
Created May 4, 2012
Luigi Viggiano This code works with IE5:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function addRow(tableID) {
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) {
for (var i = arguments.length - 1; i >= 1; i--) {
var cell = row.insertCell(arguments.length - 1 - i);
cell.appendChild(document.createTextNode(arguments[i]));
}
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<BUTTON ONCLICK="addRow('table1', 'COLUMN1', 'COLUMN2');">
Add row!
</BUTTON>
<P>
<TABLE ID="table1" BORDER="1" CLASS="js">
<TBODY>
<TR>
<TD>COLUMN1</TD>
<TD>COLUMN2</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>