js筛选table的数据

<input type="text" id="searchInput" onkeyup="filterTable()" placeholder="搜索...">
<table id="dataTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>34</td>
    <td>上海</td>
  </tr>
  <!-- 更多行... -->
</table>

function filterTable() {
  // 获取输入值
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("dataTable");
  tr = table.getElementsByTagName("tr");

  // 遍历所有表格行，除了表头
  for (i = 1; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0]; // 假设我们根据第一列筛选
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = ""; // 显示匹配的行
      } else {
        tr[i].style.display = "none"; // 隐藏不匹配的行
      }
    }
  }
}