HTML表格多列内容实时搜索过滤教程

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索姓名或国家...">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">姓名</th>
    <th style="width:40%;">国家</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase(); // 获取搜索关键词并转为大写，实现不区分大小写搜索
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr"); // 获取所有行

  for (i = 0; i < tr.length; i++) {
    // 过滤掉标题行
    if (tr[i].classList.contains('header')) {
        continue;
    }
    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"; // 隐藏该行
      }
    }
  }
}

<script>
function myFunction() {
  // 声明变量
  var input, filter, table, tr, td, td1, i, txtValue, txtValue1;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase(); // 获取搜索关键词并转为大写
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr"); // 获取表格的所有行

  // 遍历所有表格行，隐藏不匹配搜索查询的行
  for (i = 0; i < tr.length; i++) {
    // 跳过表格标题行
    if (tr[i].classList.contains('header')) {
        continue;
    }

    // 获取第一列（姓名）和第二列（国家）的单元格
    td = tr[i].getElementsByTagName("td")[0]; // 第一列
    td1 = tr[i].getElementsByTagName("td")[1]; // 第二列

    // 确保单元格存在，避免潜在错误
    if (td && td1) {
      txtValue = td.textContent || td.innerText;     // 获取第一列文本内容
      txtValue1 = td1.textContent || td1.innerText; // 获取第二列文本内容

      // 检查第一列或第二列是否包含搜索关键词
      if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue1.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = ""; // 如果任一列匹配，则显示该行
      } else {
        tr[i].style.display = "none"; // 否则隐藏该行
      }
    } else {
        // 如果行数据不完整，例如只有一列，也隐藏该行或根据需求处理
        tr[i].style.display = "none";
    }
  }
}
</script>

// ...
td = tr[i].getElementsByTagName("td")[0];
td1 = tr[i].getElementsByTagName("td")[1];
td2 = tr[i].getElementsByTagName("td")[2]; // 获取第三列

if (td && td1 && td2) { // 确保所有目标单元格都存在
    txtValue = td.textContent || td.innerText;
    txtValue1 = td1.textContent || td1.innerText;
    txtValue2 = td2.textContent || td2.innerText; // 获取第三列文本

    if (txtValue.toUpperCase().indexOf(filter) > -1 || 
        txtValue1.toUpperCase().indexOf(filter) > -1 ||
        txtValue2.toUpperCase().indexOf(filter) > -1) { // 组合三个条件
        tr[i].style.display = "";
    } else {
        tr[i].style.display = "none";
    }
}
// ...