gpt4 book ai didi

javascript - javascript中动态创建的按钮中的Onclick事件

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:04:19 25 4
gpt4 key购买 nike

要求:我有一张表,一行三列。第一列有按钮。当我单击该按钮时,新行应添加到表中,当我单击新添加行中的按钮(即动态创建)时,它应进一步添加新行。

只有最后一行按钮应该添加新行,所有之前的按钮应该更改为删除按钮。

--java脚本函数。

<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>

当我运行这段代码时,我得到一行三列。当我单击第一行中的按钮时......它会无限添加行。请帮助我获得输出。

提前致谢。

最佳答案

此代码不起作用的原因是这部分:

element1.onclick=addRow(tableID);

您期望发生的是将值“addRow(tableID)”分配给新创建元素的“onclick”属性。

您实际做的是立即调用“addRow”函数,导致程序无限循环。

解决这个问题的最短途径是改用这样的东西:

element1.setAttribue('onclick','addRow("'+tableID+'")');

关于javascript - javascript中动态创建的按钮中的Onclick事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13133731/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com