dcsimg

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>