Home Tutorial Javascript JavaScript generate dynamic row

 
 

Share on Google+Share on Google+
JavaScript generate dynamic row
Posted on: August 12, 2010 at 12:00 AM
Advertisement
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.

Advertisement

Related Tags for JavaScript generate dynamic row:


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.

Posted on: August 12, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com