JavaScript generate dynamic row


 

JavaScript generate dynamic row

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

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.

Ads