Onclick event in dynamically created button in javascript

Question

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 .

Clark Pan · Accepted Answer · 2012-10-30 07:09:03Z

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+'")');

edited Oct 30, 2012 at 7:09

answered Oct 30, 2012 at 6:33

Clark Pan

6,0271 gold badge24 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pughalveni Over a year ago

Hi clark Pan, thank you .now its looping indefinately. when i click the button one new row is added. but button click event is not added to the newly added button. ie. if i click the button in the second row,new row is not added. how to do this .

pughalveni Over a year ago

Thank you so much clark.. its working now.. but new row is added when i click any botton. i want to disable this for previously added button.and want to add only when i click last added button. ie. after adding new row, this row button should change as delete button .

Ilya Sidorovich · Accepted Answer · 2012-10-30 06:28:29Z

1

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

}

answered Oct 30, 2012 at 6:28

Ilya Sidorovich

1,5901 gold badge14 silver badges15 bronze badges

1 Comment

pughalveni Over a year ago

Thank you so much.. how to call addrow function from the newly added button .(when i click the button in second row)

Collectives™ on Stack Overflow

Onclick event in dynamically created button in javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related