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 .
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 .
Share Improve this question edited Feb 23, 2018 at 21:17 Heretic Monkey 12.1k7 gold badges61 silver badges131 bronze badges asked Oct 30, 2012 at 6:24 pughalvenipughalveni 511 gold badge1 silver badge4 bronze badges2 Answers
Reset to default 2The 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+'")');
That's because your function is calling itself:
**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);**
}