Framework7动态JSON数据表格多列过滤功能实现求助

嘿，作为前端新手你已经搞定了单列表过滤，很棒！现在只需要调整一下脚本逻辑，就能让三个过滤输入框同时生效啦。核心思路是：每一行必须满足所有输入框的过滤条件才会显示，如果某个输入框为空，就默认该列的过滤条件自动满足。

修改后的JavaScript代码 #

function filterTable() {
  // 获取三个过滤输入框的值并转为大写（统一大小写避免区分）
  const brandFilter = document.getElementById("brandFilter").value.toUpperCase();
  const modelFilter = document.getElementById("modelFilter").value.toUpperCase();
  const energyFilter = document.getElementById("energyFilter").value.toUpperCase();
  
  // 获取表格和所有行
  const table = document.getElementById("productList");
  const tr = table.getElementsByTagName("tr");

  // 遍历每一行
  for (let i = 0; i < tr.length; i++) {
    // 获取当前行的三列数据
    const tdBrand = tr[i].getElementsByTagName("td")[0];
    const tdModel = tr[i].getElementsByTagName("td")[1];
    const tdEnergy = tr[i].getElementsByTagName("td")[2];

    if (tdBrand && tdModel && tdEnergy) {
      // 获取每列的文本内容
      const brandText = tdBrand.textContent || tdBrand.innerText;
      const modelText = tdModel.textContent || tdModel.innerText;
      const energyText = tdEnergy.textContent || tdEnergy.innerText;

      // 判断当前行是否满足所有过滤条件
      // 输入框为空时，默认满足该列的过滤
      const isBrandMatch = brandFilter === "" || brandText.toUpperCase().includes(brandFilter);
      const isModelMatch = modelFilter === "" || modelText.toUpperCase().includes(modelFilter);
      const isEnergyMatch = energyFilter === "" || energyText.toUpperCase().includes(energyFilter);

      // 三个条件都满足才显示该行，否则隐藏
      tr[i].style.display = (isBrandMatch && isModelMatch && isEnergyMatch) ? "" : "none";
    }
  }
}

代码说明 #

1. 获取所有过滤值：先拿到三个输入框的内容，统一转成大写，这样过滤时不会区分大小写，用户体验更好。
2. 遍历行并获取列数据：对每一行，分别取出品牌、型号、能耗三列的DOM元素和文本内容。
3. 多条件判断：
   • 如果某个输入框是空的，那该列的过滤条件自动成立（比如用户没填型号过滤，所有型号都能通过）
   • 只有当品牌、型号、能耗的过滤条件同时满足时，才显示该行，否则隐藏。
4. 保持HTML不变：你现有的三个<input>标签不需要修改，它们的onkeyup="filterTable()"已经能触发更新。

新手友好的优化建议（可选） #

如果想让代码更高效、更符合现代JS写法，可以做这两个小调整：

• 缓存DOM元素：把获取输入框和表格的操作放在函数外面，避免每次按键都重复查询DOM：

  // 全局缓存元素
  const brandInput = document.getElementById("brandFilter");
  const modelInput = document.getElementById("modelFilter");
  const energyInput = document.getElementById("energyFilter");
  const table = document.getElementById("productList");
  
  function filterTable() {
    const brandFilter = brandInput.value.toUpperCase();
    // ... 后面的逻辑不变
  }
  

• 用事件监听代替内联onkeyup：把HTML里的onkeyup="filterTable()"删掉，换成JS里的事件绑定，更利于代码维护：

  brandInput.addEventListener("keyup", filterTable);
  modelInput.addEventListener("keyup", filterTable);
  energyInput.addEventListener("keyup", filterTable);
  

这样调整后，你的多列过滤功能就能完美工作啦！

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