how to change the value of the dynamically created button in javascript
Question
Requirements: I have one table with one row and three columns.first column has button ,second column and third column has text box and check box.
if i click that button one new row is added dynamically as same as first row. now if i click the button in newly created row ,one more row should add. as soon as new row added, the current row button should change to delete button.ie only last row button should have add functionality and all other previous row should have delete button .
i wrote some code, hat im getting is, new row is added when i click the last button as well as the previous button..
i want to change the previous dynamically created button value as delete.while clicking the button,its valuve should change to delete(then this button should able to delete that row) and new row should be added.
please help me to get this output. im trying for long. thank you.
<html>
<head runat="server">
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var e1=document.documentElement.getElementsByTagName('input');
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 Row'+rowCount);
element1.setAttribute('value','Add Row');
cell1.appendChild(element1);
element1.setAttribute('onclick','addRow("'+tableID+'")');
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);
}
</script>
</head>
<BODY>
<TABLE id="dataTable" width="250px" border="1">
<TR>
<td><INPUT type="button" value="Add Row" name="Add Row0" onclick="addRow('dataTable')"/></td>
<TD> <INPUT type="text" /> </TD>
<TD><INPUT type="checkbox" name="chk"/></TD>
</TR>
</TABLE>
</BODY>
</html>
1 answers
solution1
0 2012-10-30 10:13:24
If you're willing to use jQuery the answer is this simple:
// First clone the last row as a new row
$('#dataTable tr:last-child').clone().appendTo('#dataTable');
// Now change all buttons except the last row to call a delete function
$('#dataTable tr:not(tr:last-child) input[type=button]').click(function (event) {
// Passing this to the function sends the button element from which you could determine the parent or whatever else you need
deleteRow(this);
});
EDIT: Also, I would remove the onclick assignment in your HTML if you chose to work this way and instead assign the Add button a .click handler from jQuery:
$('#dataTable tr:last-child input[type=button]').click(function (event) {
addRow('dataTable');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.