javascript - 过滤动态创建的表行(Jquery)

Question

我必须根据搜索栏内提供的输入过滤一个表(包含用户的名字、姓氏、电话和地址)。

表格的内容是使用表单通过 jquery 动态添加的。

下面的代码是我到目前为止能够做的关于过滤表行的代码(它只适用于在 html 中编码的表行，而不适用于使用 jquery 动态添加的表行)。

我知道可以在 .on() 函数上添加委托(delegate)事件处理程序，但我无法编写完成这项工作的代码。

//Code that filters table rows according to user's search bar content

$("#search").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

<input type="text" id="search" placeholder="Search for names..">
<!-- This is my search bar -->

非常感谢， 卢卡·P​​。

Answer 1

你可以使用这个函数

    $("#search").on("keyup", function() {
    var input, filter, table, tr, td, i;
    input = $("#search");
    filter = input.val().toUpperCase();
    table = $("#table");
    tr = table.find("tr");

    tr.each(function () {
        var linha = $(this);
        $(this).find('td').each(function () {
            td = $(this);
            if (td.html().toUpperCase().indexOf(filter) > -1) {
                linha.show();
                return false;
            } else {
                linha.hide();
            }
        })
})
})