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

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

javascript dynamic

javascript中动态创建的按钮中的Onclick事件,javascript,dynamic,onclick,tablerow,Javascript,Dynamic,Onclick,Tablerow,要求：我有一个表，一行三列。第一列有一个按钮。当我单击该按钮时，新行应添加到表中，当我单击新添加行（即动态创建）中的按钮时，它应进一步添加新行只有最后一行按钮应添加新行，所有以前的按钮应更改为删除按钮 --java脚本函数 <html> <head runat="server"><TITLE>Add/Remove dynamic rows in HTML table</TITLE> <SCRIPT language="javascri

要求：我有一个表，一行三列。第一列有一个按钮。当我单击该按钮时，新行应添加到表中，当我单击新添加行（即动态创建）中的按钮时，它应进一步添加新行

只有最后一行按钮应添加新行，所有以前的按钮应更改为删除按钮

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


在HTML表中添加/删除动态行
函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var cell1=行插入单元格（0）；
var element1=document.createElement（“输入”）；
element1.setAttribute（'type'，'button'）；
element1.setAttribute（'name'，'addrow1'）；
element1.setAttribute（'value'，'addrow'）；
单元格1.附加子元素（元素1）；
var cell2=行插入单元格（1）；
var element2=document.createElement（“输入”）；
element2.type=“text”；
第2单元。附加子元素（元素2）；
var cell3=行插入单元格（2）；
var element3=document.createElement（“输入”）；
element3.type=“复选框”；
第三单元附属物（第三单元）；
element1.onclick=addRow（tableID）；
}

当我运行这段代码时，我得到一行三列。当我单击第一行的按钮时。。它可以无限地添加行。请帮我获取输出

提前感谢。

这是因为您的函数正在调用自身：

**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);**

}

此代码不起作用的原因是以下部分：

element1.onclick=addRow(tableID);

您希望发生的事情是为新创建的元素的“onclick”属性分配一个“addRow（tableID）”值

实际上，您所做的是直接调用“addRow”函数，导致程序不确定地循环

解决这一问题的最短路径是使用类似以下内容：

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

嗨，潘克拉克，谢谢你。现在它正在不确定地循环。单击按钮时，会添加一个新行。但按钮单击事件不会添加到新添加的按钮。即，如果单击第二行中的按钮，则不会添加新行。怎么做，非常感谢你，克拉克。。现在可以工作了。。但当我单击任何按钮时，会添加新行。我想为以前添加的按钮禁用此功能。并且只想在单击上次添加的按钮时添加。例如，添加新行后，此行按钮应更改为删除按钮。非常感谢。。如何从新添加的按钮调用addrow函数。（当我单击第二行的按钮时）