javascript - 如何使用 javascript 过滤动态 HTML 表格

Question

每当发生事件时，我都会将行追加到表中。但是当我尝试过滤表时，我只能过滤表中的静态数据。我怎样才能过滤附加的行。请在这件事上给予我帮助。

//过滤行

var $rows = $('#table 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();
});

Answer 1

变量 rows 在您告诉 jQuery 获取这些元素时使用 DOM 中的行进行初始化。无论添加或删除多少行，rows 变量将始终具有相同的元素集。最快的解决方案是将变量声明移动到 keyup 处理程序中，如下所示:

$('#search').keyup(function() {
  var $rows = $('#table tr');
  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();
});

另一个解决方案是使用getElementsByTagName，这会返回一个实时的 HTMLCollection。换句话说，DOM 中的更改在发生时会反射(reflect)在您的变量中。下面的代码片段将记录表中的行数，而无需重新查询 DOM。

const
  tableTwo = document.getElementById('table2'),
  // Get a live HTMLCollection with the rows in table 2.
  tableTwoRows = tableTwo.getElementsByTagName('tr');
  
// Log the number of rows in table 2.
console.log(`Number of rows in table 2 before insert: ${tableTwoRows.length}`);

const
  cell = document.createElement('td'),
  row = document.createElement('tr'),
  body = tableTwo.querySelector('tbody');
  
// Create a third row to add to the table.
cell.textContent = 'table 2, row 3';
row.appendChild(cell);
body.appendChild(row);

// Log the number of rows in table 2, this should report a number than the last
// log eventhough we didn't update the content of the tableTwoRows variable manually.
console.log(`Number of rows in table 2 after insert: ${tableTwoRows.length}`);

<table id="table1">
  <tbody>
    <tr>  
      <td>table 1, row 1</td>
    </tr>
  </tbody>
</table>


<table id="table2">
  <tbody>
    <tr>  
      <td>table 2, row 1</td>
    </tr>
    <tr>
      <td>table 2, row 2</td>
    </tr>
  </tbody>
</table>