JavaScript generate dynamic row

Home Tutorial Javascript JavaScript generate dynamic row

JavaScript generate dynamic row
Posted on: August 12, 2010 at 12:00 AM

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.

Related Tags for JavaScript generate dynamic row:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics