JS实现table表格内针对某列内容进行即时搜索筛选功能

实现table表格内针对某列内容进行即时搜索筛选功能的攻略包括以下几个步骤：

1. HTML结构设计

在设计HTML表格结构时，需要为搜索功能留出位置。可以在表格上方添加一个输入框，用户在输入框中输入筛选条件，表格会根据输入内容筛选匹配的数据。

例如：

<div>
  <label for="filter">搜索：</label>
  <input type="text" id="filter" name="filter">
</div>
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>北京市</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>上海市</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>18</td>
      <td>广州市</td>
    </tr>
  </tbody>
</table>

1. 获取筛选条件

在JS中，需要获取到输入框中用户输入的筛选条件。可以通过addEventListener()方法监听输入框的keyup事件，每次用户输入完成后都会触发该事件，获取输入框中的值并调用筛选函数。

例如：

var filterInput = document.querySelector('#filter');

filterInput.addEventListener('keyup', function() {
  var filterValue = this.value;
  filterRows(filterValue);
});

1. 筛选匹配的行数据

在JS中，需要获取到所有表格行元素，并依次遍历判断是否匹配筛选条件，如果匹配则显示该行数据，否则隐藏该行数据。可以通过querySelectorAll()方法获取所有的表格行元素，并使用forEach()方法依次遍历行元素，判断某一列的值是否匹配筛选条件。

例如：

function filterRows(filterValue) {
  var rows = document.querySelectorAll('tbody tr');

  rows.forEach(function(row) {
    var name = row.querySelector('td:nth-child(1)').textContent;
    if (name.indexOf(filterValue) !== -1) {
      row.style.display = 'table-row';
    } else {
      row.style.display = 'none';
    }
  });
}

在这个例子中，我们筛选第一列内容（即姓名），querySelector()方法选择器中使用了:nth-child()伪类，表示选择该行中第一个<td>元素。

1. 完整代码

完整的JS实现代码如下：

var filterInput = document.querySelector('#filter');

filterInput.addEventListener('keyup', function() {
  var filterValue = this.value;
  filterRows(filterValue);
});

function filterRows(filterValue) {
  var rows = document.querySelectorAll('tbody tr');

  rows.forEach(function(row) {
    var name = row.querySelector('td:nth-child(1)').textContent;
    if (name.indexOf(filterValue) !== -1) {
      row.style.display = 'table-row';
    } else {
      row.style.display = 'none';
    }
  });
}

1. 示例说明

假设以上HTML和JS代码已经被加载到页面中，在输入框中输入张时，表格中只有一行匹配，其他两行数据都被隐藏了。

例如：

搜索：

姓名	年龄	地址
张三	20	北京市
李四	25	上海市
王五	18	广州市

当输入框中没有任何内容时，所有的表格行都应该显示出来。

例如：

搜索：

姓名	年龄	地址
张三	20	北京市
李四	25	上海市
王五	18	广州市