admin管理员组

文章数量:1336144

Requirements: I have one table with one row and three columns. first column is having button. when i click that button new row should be added to the table, and when i click the button in the newly added row(ie created dynamically) it should further add new row.

only the last row button should add new row,all previous buttons should change to delete buttons .

--java script function.

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

when i run this code i get one row with three columns. when i click the button in the first row.. its adding rows infinitely. please help me to get output .

thanks in advance .

Requirements: I have one table with one row and three columns. first column is having button. when i click that button new row should be added to the table, and when i click the button in the newly added row(ie created dynamically) it should further add new row.

only the last row button should add new row,all previous buttons should change to delete buttons .

--java script function.

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

when i run this code i get one row with three columns. when i click the button in the first row.. its adding rows infinitely. please help me to get output .

thanks in advance .

  • javascript
  • dynamic
  • onclick
  • tablerow
Share Improve this question edited Feb 23, 2018 at 21:17 Heretic Monkey 12.1k7 gold badges61 silver badges131 bronze badges asked Oct 30, 2012 at 6:24 pughalvenipughalveni 511 gold badge1 silver badge4 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

The reason this code doesn't work is this part:

element1.onclick=addRow(tableID);

What you're expecting to happen is to assign a value of 'addRow(tableID)' to the 'onclick' attribute of the newly created element.

What you're actually doing is invoking the 'addRow' function straight away, cause the program to loop indefinately.

The shortest path to fix this would be to use something like this instead:

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

That's because your function is calling itself:

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

}

本文标签： dynamicOnclick event in dynamically created button in javascriptStack Overflow

版权声明：本文标题：dynamic - Onclick event in dynamically created button in javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742395944a2466923.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。