需求:我有一个单行三列的表格。第一列有按钮，第二列和第三列有文本框和复选框。
如果我单击该按钮，则会动态添加一个新行，与第一行相同。现在，如果我单击新创建的行中的按钮，则应该添加一行。添加新行后，当前行按钮应更改为删除按钮。即，只有最后一行按钮应具有添加功能，所有其他前一行应具有删除按钮。
我写了一些代码，我得到的是，当我单击最后一个按钮以及上一个按钮时，会添加新行..
我想将以前动态创建的按钮值更改为删除。单击该按钮时，其值应更改为删除(然后该按钮应该能够删除该行)并应添加新行。
请帮我得到这个输出。我尝试了很长时间。谢谢。
<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>
最佳答案
如果您愿意使用 jQuery，答案就很简单:
// 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);
});
编辑: 另外，如果您选择以这种方式工作，我会删除 HTML 中的 onclick 分配，而是为“添加”按钮分配一个来自 jQuery 的 .click 处理程序:
$('#dataTable tr:last-child input[type=button]').click(function (event) {
addRow('dataTable');
});
关于javascript - 如何更改javascript中动态创建的按钮的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13136615/