Share on Google+Share on Google+

JavaScript generate dynamic row

Ads
In this section, you will learn how to generate dynamic row using JavaScript.

JavaScript generate dynamic row

In this section, you will learn how to generate dynamic row using JavaScript. Here a row contain 3 fields(2 textfields,1 text area). Every time if the user click add button, a new row will get added dynamically to the table with these 3 fields.

Here is the code:

<html>
<
head>
<
script LANGUAGE="JavaScript">
function addRow(tableID){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("textarea");
element3.setAttribute("name","mytextarea");
element3.setAttribute("cols","20");
element3.setAttribute("rows","1");
cell3.appendChild(element3);
}
</script>
</
head>
<
body>
<
form name="f1" id="f1"><input type="button" value="Add" onclick="addRow('datatable')">
<
table id="datatable" cellspacing="0" border="1">
<
tbody>
<
tr>
<
td><input type="text"></td>
<
td><input type="text"></td>
<
td><textarea rows="1" cols="20"></textarea></td>
</
tr>
</
tbody>
</
table>
</
form>
</
body>
</
html>

Output:

As the user clicks the button,. a row will get generated.

Advertisements

Posted on: August 12, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Ads

Advertisement