Javascript 使用 foreach 函数添加新行

Question

$(function(){
    var tbl = $("#table");

    $("#addRowBtn").click(function(){
        $("<tr><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td><input type='checkbox' class='setbox'></td><td><button class='delRowBtn'>Delete</button></td></tr>").appendTo(tbl);        
    });

    $(document.body).delegate(".delRowBtn", "click", function(){
        $(this).closest("tr").remove();        
    });    

});

我目前正在向末尾带有复选框的 table 添加新行。同时，我有一个 foreach 循环来检查这些复选框以执行 AJAX 脚本，但这对这件事来说微不足道。

如果我默认填充一行（不单击“添加行”按钮），我使用的 foreach 循环效果很好。但是，它不适用于随后添加的新行。我如何让我的 foreach 循环在页面加载后检测新添加的行？

我尝试将 foreach 循环封装为一个函数，并在每次单击“添加行”按钮时重新执行它，但这似乎是在队列中添加了 AJAX 脚本。

    function setbox() {
         $(\".setBox\").each(function() {
                var isChecked = this.checked;

                $('.setBox').click(function()    {
                    $.ajax(blahblahblah});
                }
            });
      }
   }

有什么建议吗？

Answer 1

我认为这可能对您有所帮助，您不需要使用函数 setbox()。你可以试试这个代码。

  $('body').on('click', '.setbox',function()   {
    var isChecked = this.checked;
    alert(isChecked);
    //$.ajax(blahblahblah});
 });

Javascript 使用 foreach 函数添加新行

Javascript adding new row with foreach function

javascript

foreach

jquery

html-table

dynamic