使用JavaScript实现HTML表格多列数据筛选教程

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++) {
    // 关键点：只获取当前行的第一个单元格（索引为0）
    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"; // 匹配失败，隐藏该行
      }
    }
  }
}

function myFunction() {
    // 声明所需变量
    var input, filter, table, tr, i, txtValue;
    // `isset` 变量用于标记当前行是否包含匹配搜索关键词的单元格
    var isset = false; 

    // 获取搜索输入框及其值，并转换为大写
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase(); 

    // 获取表格主体元素 (通常是 <tbody>) 和所有数据行
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 

    // 外层循环：遍历表格中的每一行
    for (i = 0; i < tr.length; i++) {
        // 在处理每一行之前，将 `isset` 重置为 `false`
        isset = false; 

        // 获取当前行的所有单元格 (<td>) 集合
        let tds = tr[i].getElementsByTagName("td"); 

        // 内层循环：遍历当前行的每一个单元格
        for (let td of tds) {
            // 确保单元格元素存在
            if (td) {
                txtValue = td.textContent || td.innerText; // 获取单元格文本内容
                // 如果单元格文本（转换为大写后）包含搜索关键词
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    isset = true; // 发现匹配项，将 `isset` 设置为 `true`
                    break; // 找到匹配项后，无需再检查当前行的其他单元格，立即跳出内层循环
                }
            }
        }

        // 根据 `isset` 变量的值决定当前行的显示或隐藏状态
        // 这个判断必须在内层循环结束后进行，以确保检查了所有列
        if (isset) {
            tr[i].style.display = ""; // 如果有匹配项，则显示该行
        } else {
            tr[i].style.display = "none"; // 如果没有匹配项，则隐藏该行
        }
    }
}