Snippet to Dynamically add rows to a table

This code snippet will help you to add rows dynamically in a html table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<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("value","New row");
var cell2 = document.createElement("TD");
cell2.innerHTML = "label3";
var cell3 = document.createElement("TD");
cell3.innerHTML = "label4";
<td><inputtype=textvalue="Original Row"></td>
<td> label2</td>
<inputtype="button"value="Insert Row"onClick= "addRow();">

Most of the code is self explanatory, so am leaving it unexplained. If anybody needs help, post your questions, will help you.

6 Replies to “Snippet to Dynamically add rows to a table”

  1. can you please post a code to add both dynamic rows and cols and also the rows and cols with some html form elements like textbox, listbox, etc..

  2. thanx for this code but i have a problem to submit a form that has a dynamically added rows because i donot know the number of added row as it is change from one user to another

    please if u can give me a hand


Leave a Reply to Nathalie Cancel reply

Your email address will not be published. Required fields are marked *