Событие Onclick в динамически создаваемой кнопке в JavaScript

Question

Событие Onclick в динамически создаваемой кнопке в JavaScript

Требования: у меня есть одна таблица с одной строкой и тремя столбцами. Первый столбец имеет кнопку. когда я нажимаю эту кнопку, новая строка должна быть добавлена в таблицу, а когда я нажимаю кнопку в новой добавленной строке (то есть создается динамически), она дополнительно добавляет новую строку.

только последняя строка кнопки должна добавить новую строку, все предыдущие кнопки должны измениться, чтобы удалить кнопки.

Функция скрипта --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>

когда я запускаю этот код, я получаю одну строку с тремя столбцами. когда я нажимаю кнопку в первом ряду.. его добавление строк бесконечно. пожалуйста, помогите мне получить выходной.

заранее спасибо.

4

javascript dynamic onclick tablerow

Источник

user1784613 30 окт '12 в 06:24

2 ответа

Другие вопросы по тегам javascript dynamic onclick tablerow

user910844 30 окт '12 в 06:33 2012-10-30 06:33 · Answer 1 · 2012-10-30 06:33

Причина, по которой этот код не работает, заключается в следующем:

element1.onclick=addRow(tableID);

То, что вы ожидаете, - это присвоить значение addRow(tableID) атрибуту onclick только что созданного элемента.

На самом деле вы сразу же вызываете функцию addRow, вызывая бесконечный цикл программы.

Кратчайший путь решения этой проблемы - использовать что-то вроде этого:

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

user1155374 30 окт '12 в 06:28 2012-10-30 06:28 · Answer 2 · 2012-10-30 06:28

Это потому, что ваша функция вызывает себя:

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

}