Onclick event in dynamically created button in javascript
Requirements: I have one table with one row and three columns. first column is having button. when i click that button new row should be added to the table, and when i click the button in the newly added row(ie created dynamically) it should further add new row.
only the last row button should add new row,all previous buttons should change to delete buttons .
--java script function.
<html>
<head runat="server"><TITLE>Add/Remove dynamic rows in HTML table</TITLE>
<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.setAttribute('type','button');
element1.setAttribute('name','Add Row1');
element1.setAttribute('value','Add Row');
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("input");
element3.type = "checkbox";
cell3.appendChild(element3);
element1.onclick=addRow(tableID);
}
</HEAD>
<BODY>
<TABLE id="dataTable" width="250px" border="1">
<TR>
<td><INPUT type="button" value="Add Row" name="Add Row" onclick="addRow('dataTable')"/></td>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="checkbox" name="chk"/></TD>
</TR>
</TABLE>
</BODY>
</html>
when i run this code i get one row with three columns. when i click the button in the first row.. its adding rows infinitely. please help me to get output .
thanks in advance .
Answer
The reason this code doesn't work is this part:
element1.onclick=addRow(tableID);
What you're expecting to happen is to assign a value of 'addRow(tableID)' to the 'onclick' attribute of the newly created element.
What you're actually doing is invoking the 'addRow' function straight away, cause the program to loop indefinately.
The shortest path to fix this would be to use something like this instead:
element1.setAttribue('onclick','addRow("'+tableID+'")');