Creation of Dynamic rows in javascript


Create a html file with this code and check the functionality:

<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”;
element1.name = “empNo”;
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”,”10″);
element3.setAttribute(“rows”,”1″);
cell3.appendChild(element3);
}
function deleteRow(tableID) {

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount > 1) {
table.deleteRow(rowCount – 1);
}

}
</script>
</head>
<body>
<form name=”f1″ id=”f1″>
<input type=”button”value=”Add” onclick=”addRow(‘datatable’)”>
<table id=”datatable” cellspacing=”0″ border=”1″ bgcolor=”#738711″>
<tbody>
<tr>
<td><input type=”text” ></td><td><input type=”text”></td><td><textarea rows=”1″ cols=”10″></textarea></td>

<td><a href=”javascript:void(0);” onclick=”deleteRow(‘datatable’)” >Remove</a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

4 thoughts on “Creation of Dynamic rows in javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.