单击Jquery中的单击删除表行

I have this code Ajax/Jquery that creates a dynamic table with rows based on data retrieved from the database. When creating the table buttons are also created dynamically for each row. In addition to the above I would like to be able to call a function for thees buttons. For example if the first table row button has an id of 0, then clicking on button with id 0 will call a function that would take the id of the first row, and perform a database delete function. How can I achieve this?

我有这个代码Ajax / Jquery，它根据从数据库中检索的数据创建一个包含行的动态表。创建表时，还会为每行动态创建按钮。除了上述之外，我希望能够为你的按钮调用一个函数。例如，如果第一个表行按钮的id为0，则单击id为0的按钮将调用将采用第一行的id的函数，并执行数据库删除功能。我怎样才能做到这一点？

Here is my code where the table is created dynamically:

这是我动态创建表的代码：

success: function(controller_data)
              {     JSON.stringify(controller_data);

                        var tr;
                        for (var i = 0; i < controller_data.length; i++) {

                            tr = $('<tr/>');
                  tr.append("<td><input name = \"radios\" value = tablebutton"+i+" id=tablebutton"+i+" type=\"button\"></td>");
                            tr.append("<td>" + controller_data[i].id + "</td>");
                            tr.append("<td>" + controller_data[i].question + "</td>");
                            tr.append("<td>" + controller_data[i].image + "</td>");
                            tr.append("<td>" + controller_data[i].answer1 + "</td>");
                            tr.append("<td>" + controller_data[i].answer2 + "</td>");
                            tr.append("<td>" + controller_data[i].answer3 + "</td>");
                            tr.append("<td>" + controller_data[i].answer4 + "</td>");
                            $('table').append(tr);
                              }
              }

2 个解决方案

#1

You should use event delegation on() since you deal with fresh DOM added dynamically to the page, e.g :

您应该在（）上使用事件委托，因为您处理动态添加到页面的新DOM，例如：

$('body').on('click', 'input[id^="tablebutton"]', function(){
     //Call your function
})

Try to add class to identify td that contain row id e.g :

尝试添加类来标识包含行id的td，例如：

tr.append("<td class='row-id'>" + controller_data[i].id + "</td>");

Full code :

完整代码：

$(function(){ //Ready function
     $('body').on('click', 'input[id^="tablebutton"]', function(){
         var row_id = $(this).parents('tr').find('.row-id').text(); //get the id
         myFunction(row_id);
     })
})

Hope this helps.

希望这可以帮助。

#2

This would be the delegated event handler registered on the next suitable parent node which would be the <table> (imho)

这将是在下一个合适的父节点上注册的委托事件处理程序，它将是

（imho）

$("table").on("click", "input.delete", function() {
    var rowId = $(this).val();

    // delete row in backend...
});

But this will only work with the restructured success handler below:

但这只适用于下面重组的成功处理程序：

success : function (controller_data) {
    var rows = [];

    for (var i = 0; i < controller_data.length; i++) {
        rows.push('<tr>'
                    + '<td><input class="delete" name="radios" value="' + i + '" type="button"></td>'
                    + '<td>' + controller_data[i].id + '</td>'
                    + '<td>' + controller_data[i].question + '</td>'
                    + '<td>' + controller_data[i].image + '</td>'
                    + '<td>' + controller_data[i].answer1 + '</td>'
                    + '<td>' + controller_data[i].answer2 + '</td>'
                    + '<td>' + controller_data[i].answer3 + '</td>'
                    + '<td>' + controller_data[i].answer4 + '</td>'
                + '</tr>';
    }

    $("table").append(rows.join(""));
}

I've removed the useless JSON.stringify(...) call, and changed the for loop a little bit to only change the DOM once per request instead of once per row.
I've also added the class delete to the <input /> for a more descriptive selector.
And last but not least the value is now the id only instead of tablebutton<id>.

我已经删除了无用的JSON.stringify（...）调用，并且稍微更改了for循环，只更改了每个请求一次DOM而不是每行一次。我还将类删除添加到以获得更具描述性的选择器。最后但并非最不重要的是，现在的值只是id而不是tablebutton 。

#1