如何使用JavaScript实现基于多列的表格数据筛选功能

第一步：修正PHP渲染代码的错误 #

原代码在数据库查询循环内重复生成完整表格，会导致页面出现多个id为myTable的重复元素，JS无法正常定位，修正后代码如下：

<input type="text" id="myInput" onKeyUp="myFunction()" placeholder="Search">

<table class="table table-bordered" id="myTable" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th class="text-center">Name</th>
      <th class="text-center">Age</th>
      <th class="text-center">Hobby</th>
    </tr>
  </thead>
  <tbody>
  <?php
    include 'connection.php'; // 连接数据库
    $data = mysqli_query($con, "SELECT * FROM `database`");
    while($d = mysqli_fetch_array($data)){
  ?>
    <tr>
      <td class="text-center"><?php echo $d['name']; ?></td>
      <td><?php echo $d['age']; ?></td>
      <td><?php echo $d['hobby']; ?></td>
    </tr>
  <?php } ?>
  </tbody>
</table>

第二步：修改JavaScript筛选逻辑 #

将原单列匹配逻辑调整为多列任意匹配，这里指定下标0（Name列）和2（Hobby列）作为筛选依据，代码如下：

function myFunction() {
  // 声明变量
  var input, filter, table, tr, td, i, j, txtValue, matchFlag;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // 遍历所有表格行
  for (i = 0; i < tr.length; i++) {
    matchFlag = false; // 初始化匹配标记为未匹配
    // 遍历需要筛选的列：0对应Name列，2对应Hobby列
    const filterColumns = [0, 2];
    for (j = 0; j < filterColumns.length; j++) {
      td = tr[i].getElementsByTagName("td")[filterColumns[j]];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          matchFlag = true; // 任意一列匹配即标记为匹配
          break; // 匹配后跳出内层循环，无需再校验其他列
        }
      }
    }
    // 根据匹配标记控制行显隐
    tr[i].style.display = matchFlag ? "" : "none";
  }
}

功能说明 #

• 输入关键词后会同时校验每行的Name和Hobby列内容，只要其中一列包含关键词就会显示该行
• 如果后续需要调整筛选列，只需修改filterColumns数组内的列下标即可，比如添加Age列可改为[0,1,2]
• 不区分大小写匹配，符合原有交互逻辑

内容的提问来源于stack exchange，提问作者kebberpee