在javascript中動態創建按鈕的Onclick事件

Question

要求：我有一個表有一行三列。 第一列有按鈕。 當我點擊該按鈕時，應該將新行添加到表中，當我單擊新添加的行中的按鈕（即動態創建）時，它應該進一步添加新行。

只有最后一行按鈕應該添加新行，所有以前的按鈕都應該更改為刪除按鈕。

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

當我運行此代碼時，我得到一行有三列。 當我點擊第一行中的按鈕時......它無限地添加行。 請幫助我獲得輸出。

提前致謝。

Answer 1

這段代碼不起作用的原因是這部分：

element1.onclick=addRow(tableID);

您期望發生的是將“addRow（tableID）”的值分配給新創建的元素的“onclick”屬性。

你實際在做的是立即調用'addRow'函數，導致程序無限循環。

修復此問題的最短路徑是使用類似這樣的東西：

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

Answer 2

那是因為你的函數在調用自己：

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

}

在javascript中動態創建按鈕的Onclick事件

問題描述

2 個解決方案

解決方案1
2 2012-10-30 06:33:16

解決方案2
1 2012-10-30 06:28:29

在javascript中動態創建按鈕的Onclick事件

問題描述

2 個解決方案

解決方案1 2 2012-10-30 06:33:16

解決方案2 1 2012-10-30 06:28:29

解決方案1
2 2012-10-30 06:33:16

解決方案2
1 2012-10-30 06:28:29