使用Hyperscript过滤表格的问题及多条件过滤需求

一、修复单条件过滤时误删所有行的问题 #

你的原代码直接移除不匹配的行，导致每次筛选后符合条件的行被永久删除，表格最终为空。正确做法是切换行的显示状态（显示/隐藏）而非删除行，每次筛选前先恢复所有行的显示，再隐藏不符合条件的行。

修改后的单条件过滤代码：

<input id="filter1" type="text" 
       _="on change 
            show <tbody tr/> in #ptable 
            set filterText to my value.toLowerCase()
            if filterText
              hide <tbody tr/> in #ptable if its textContent.toLowerCase() does not contain filterText
            end
         end" 
/>

关键改动：

• 每次触发change事件时，先通过show恢复所有行的显示
• 使用hide替代remove，只隐藏不匹配的行，保留DOM结构，避免数据丢失

二、实现多条件同时过滤（不覆盖前序条件） #

多条件过滤的核心是：每次任意条件变化时，基于所有原始行重新校验所有条件，而非仅应用当前条件覆盖之前的结果。以下提供两种实现方式：

方式1：结合Alpine.js响应式数据（贴合原代码语法） #

<div x-data="{ filterVendor: '', filterSpeed: '' }">
  <input type="text" placeholder="筛选厂商" x-model="filterVendor" 
         _="on input run 
              // 先显示所有行，重置过滤状态
              show <tbody tr/> in #ptable
              // 获取小写后的过滤值
              set vendor to filterVendor.toLowerCase()
              set speed to filterSpeed.toLowerCase()
              // 隐藏不满足任意条件的行：空条件自动视为满足
              hide <tbody tr/> in #ptable if 
                (vendor && !its textContent.toLowerCase().includes(vendor)) || 
                (speed && !its textContent.toLowerCase().includes(speed))
         end" 
  />
  <input type="text" placeholder="筛选速度" x-model="filterSpeed" 
         _="on input run 
              show <tbody tr/> in #ptable
              set vendor to filterVendor.toLowerCase()
              set speed to filterSpeed.toLowerCase()
              hide <tbody tr/> in #ptable if 
                (vendor && !its textContent.toLowerCase().includes(vendor)) || 
                (speed && !its textContent.toLowerCase().includes(speed))
         end" 
  />
</div>

方式2：原生JS函数（灵活适配复杂条件） #

<input id="filterVendor" type="text" placeholder="筛选厂商" oninput="filterTable()" />
<input id="filterSpeed" type="text" placeholder="筛选速度" oninput="filterTable()" />

<table id="ptable">
  <tbody>
    <!-- 表格行内容 -->
  </tbody>
</table>

<script>
function filterTable() {
  const rows = document.querySelectorAll('#ptable tbody tr');
  const vendorFilter = document.getElementById('filterVendor').value.toLowerCase();
  const speedFilter = document.getElementById('filterSpeed').value.toLowerCase();

  rows.forEach(row => {
    const rowText = row.textContent.toLowerCase();
    // 校验所有条件：空条件默认通过
    const matchesVendor = !vendorFilter || rowText.includes(vendorFilter);
    const matchesSpeed = !speedFilter || rowText.includes(speedFilter);
    // 仅当所有条件都满足时显示行
    row.style.display = matchesVendor && matchesSpeed ? '' : 'none';
  });
}
</script>

核心逻辑：

• 每次条件变化时，先获取所有行的原始状态
• 对每行同时校验所有过滤条件，只有满足全部条件的行才显示
• 空输入的条件自动视为“匹配”，不影响其他条件的筛选

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