如何实现DataTable搜索框同时支持姓氏或名字检索？

当前你的搜索逻辑只能固定匹配某一列，想要同时匹配姓氏（第3列，下标2）和名字（第4列，下标3），核心是要检查目标列中的任意一列是否包含搜索关键词，而[2][3]这种写法是错误的——它是取第3列td元素的第3个字符，并非指向另一列。

修改后的完整代码 #

<script>
function myFunction() {
  var input, filter, table, tr, i, targetColumns, td, isMatch;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  // 定义需要搜索的列下标（姓氏列[2]、名字列[3]）
  targetColumns = [2, 3];

  for (i = 0; i < tr.length; i++) {
    isMatch = false;
    // 遍历所有目标列，检查是否有匹配项
    for (let colIndex of targetColumns) {
      td = tr[i].getElementsByTagName("td")[colIndex];
      if (td && td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        isMatch = true;
        break; // 只要有一列匹配，就不用继续检查其他列
      }
    }
    // 根据匹配结果控制行的显示/隐藏
    tr[i].style.display = isMatch ? "" : "none";
  }
}
</script>

关键改动说明 #

• 新增targetColumns数组，集中管理需要搜索的列下标，后续要加其他列直接修改数组即可
• 对每一行新增isMatch标志，初始为false
• 循环遍历目标列，只要某一列的内容包含搜索关键词，就将isMatch设为true并跳出循环
• 最后根据isMatch的值决定当前行是否显示

这样修改后，搜索框输入的内容会同时匹配姓氏和名字列，任意一列符合条件就会显示该行。

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