Question

我正在尝试使用Javascript过滤表格。我正在使用的代码如下：

var $rows = $('tr').not('#tr');
$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

它可以正常使用像这样的静态表：

<table id="table">
   <tr id="tr">
      <th><h4>uuid</h4></th>
      <th><h4>xValue</h4></th>
   </tr>
   <tr>
       <td><p>stuff2</p></td>
       <td><p>foo2</p></td>
   </tr>
   <tr>
       <td><p>stuff</p></td>
       <td><p>foo</p></td>
   </tr>
</table>

但是当我使用ajax从json动态创建表时，过滤脚本不再起作用了。我该如何解决这个问题？

以下是我使用的json生成表的代码：

var url = 'https://api.github.com/users/mralexgray/repos';

$.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'json',
    crossDomain: true,
    success: function(data) {
        drawTable(data);
    },
    error: function(e) {
       console.log(e.message);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $('<tr/>')
    $("#table").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td><p>" + rowData.id + "</p></td>"));
    row.append($("<td><p>" + rowData.name + "</p></td>"));
    row.append($("<td><p>" + rowData.lastName + "</p></td>"));
    row.append($("<td><p>" + rowData.private + "</p></td>"));
    row.append($("<td><p>" + rowData.fork + "</p></td>"));
    row.append($("<td><p>" + rowData.description + "</p></td>"));
    row.append($("<td><p>" + rowData.size + "</p></td>"));
}

Answer 1

在搜索功能之前定义$rows。设置后动态添加新行不会更改$rows的值。尝试在搜索功能中定义它

$('#search').keyup(function() {
  var $rows = $('tr').not('#tr'); // set value here
  ..

过滤Ajax加载的表

1 个答案: