Snippets

Home / Snippets / Dynamically add rows to a table

Dynamically add rows to a table

Snippet Menu

snippet |

revisions |

comments | Related Snippets

related |

Add to Favorites | Email

download | Print

print | Blog It

blog it

Fri. Aug. 4th, 2006 9:54 AM

1 of 1

sundaramkumar

DOM | HTML

1 comments

Add rows into a table dynamically using js,DOM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert Table Row using DOM</title>

<script language="javascript">

function addRow()

{

        var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];

        var row = document.createElement("TR");

                var cell1 = document.createElement("TD");

                        var inp1 =  document.createElement("INPUT");

                        inp1.setAttribute("type","text");

                        inp1.setAttribute("value","New row");

                        cell1.appendChild(inp1);

                var cell2 = document.createElement("TD");

                        cell2.innerHTML = "label3";

                var cell3 = document.createElement("TD");

                        cell3.innerHTML = "label4";

        row.appendChild(cell1);

        row.appendChild(cell2);

        row.appendChild(cell3);

        tbody.appendChild(row);

        //alert(row.innerHTML);

}

</script>

</head>

<body>

<table id="table1">

<tbody>

<tr>

<td><input type=text value="Original Row"></td>

<td>label1</td>

<td>label2</td>

</tr>

</tbody>

</table>

<input type="button" value="Insert Row" onClick="addRow();">

</body>

</html>