js怎么做个表格能筛选

要实现表格筛选功能，可以使用JavaScript的过滤器函数。过滤器函数可以根据特定的条件过滤表格数据，只显示符合条件的数据。

首先，在HTML页面中创建一个表格，表格中包含需要筛选的数据。然后，在JavaScript中编写一个过滤器函数，该函数接收用户输入的筛选条件，并将筛选后的数据加入到一个新的数组中。最后，将新的数组渲染到表格中以展示筛选后的数据。

具体实现过程如下：

1. HTML页面中创建一个表格，包括表头和表格数据:

<table id="myTable">
  <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>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

2. 在JavaScript中定义一个过滤器函数，该函数接收要筛选的表格数据和用户输入的筛选条件:

function filterTable(tableData, searchText) {
  let filteredData = [];

  for (let i = 0; i < tableData.length; i++) {
    let rowData = tableData[i];

    // 根据筛选条件筛选表格数据
    if (rowData[0].toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
      filteredData.push(rowData);
    }
  }

  return filteredData;
}

该函数接收两个参数，第一个参数是要筛选的表格数据，第二个参数是用户输入的筛选条件。它会遍历表格数据，根据筛选条件过滤数据并将筛选后的数据加入到一个新数组中，最后返回新的数组。

3. 编写一个事件监听函数，当用户输入筛选条件时，调用过滤器函数进行筛选:

let searchInput = document.getElementById('searchInput');
let tableData = [
  ['张三', '20', '男'],
  ['李四', '25', '女'],
  ['王五', '30', '男']
];

searchInput.addEventListener('keyup', function() {
  let searchText = searchInput.value;
  let filteredData = filterTable(tableData, searchText);

  renderTable(filteredData);
});

该方法获取用户输入的筛选条件，并将其传递给过滤器函数。然后，使用新数组重新渲染表格以显示筛选后的数据。

4. 最后，编写一个函数，用于将筛选后的数据渲染到表格中:

function renderTable(tableData) {
  let tableBody = document.querySelector("#myTable tbody");
  
  // 删除表格中的所有行
  while (tableBody.hasChildNodes()) {
    tableBody.removeChild(tableBody.firstChild);
  }

  // 循环遍历所有行数据，创建并添加新表格行
  for (let i = 0; i < tableData.length; i++) {
    let rowData = tableData[i];
    let row = document.createElement('tr');

    for (let j = 0; j < rowData.length; j++) {
      let cell = document.createElement('td');
      cell.textContent = rowData[j];
      row.appendChild(cell);
    }
    tableBody.appendChild(row);
  }
}

该函数接收过滤器函数返回的新数组，并将其重新渲染到表格中以展示筛选后的数据。它首先删除原有的表格行，然后根据新数组创建新的表格行，并将其加入到表格中。

通过以上步骤，我们可以实现一个带有筛选功能的表格。用户输入筛选条件后，JavaScript会根据筛选条件过滤表格数据，并将筛选后的数据展示在表格中，以方便用户查看。