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>

Advertisements
About

I born in Good cultural place called India. My family is traditional family. We fallow all Indian traditions.

Posted in JavaScript
4 comments on “Creation of Dynamic rows in javascript
  1. […] Creation of Dynamic rows in javascript […]

  2. […] Creation of Dynamic rows in javascript […]

  3. […] 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.

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 678 other followers

Calendar
September 2010
M T W T F S S
« Aug   Oct »
 12345
6789101112
13141516171819
20212223242526
27282930  
Mallikarjun Gunda

This is Mallikarjun Gunda, I am working as a software professional. Blogging is my Passion. This blog contains the posts on Java related technologies and programming languages. I am happy to share my knowledge through the blogs.

Blog Stats
  • 271,320 hits
IndiBlogger
malliktalksjava.wordpress.c...
70/100