Laravel点击按钮实现学生表格多条件联合筛选方案问询

核心逻辑 #

不再为每个筛选框编写重复的单列筛选函数，而是一次性收集所有筛选条件，对表格每一行进行全条件校验——只有当某一行满足所有输入的筛选条件时，才显示该行。

改造步骤 #

1. 移除冗余事件绑定：删掉每个输入框的onkeyup事件及对应的多个myFunction类函数，只保留筛选按钮的点击事件，绑定到统一的筛选函数。
2. 利用data属性复用逻辑：每个筛选框已通过data-column标记对应列的索引，直接用该属性关联输入框与表格列。
3. 统一筛选函数：
   • 获取所有带.filter-input类的筛选框，收集每个框的筛选值和对应列索引
   • 遍历表格所有行，对每一行逐一检查是否满足所有筛选条件
   • 满足所有条件则显示该行，否则隐藏

修改后的完整代码 #

<thead>
  <th>
    <input
      type="text"
      id="myInput1"
      class="form-control filter-input"
      placeholder="Search by ID..."
      data-column="0"
    />
  </th>

  <th>
    <input
      type="text"
      id="myInput"
      class="form-control filter-input"
      placeholder="Search by Name..."
      data-column="1"
    />
  </th>

  <th>
    <input
      type="text"
      id="myInput2"
      class="form-control filter-input"
      placeholder="Search by YOP..."
      data-column="3"
    />
  </th>

  <th>
    <input
      type="text"
      id="myInput3"
      class="form-control filter-input"
      placeholder="Search by Status..."
      data-column="4"
    />
  </th>

  <th>
    <button
      onclick="filterTable()"
      class="btn btn-success btn-block mobile-width"
    >
      <i class="fa fa-filter"></i> Filter
    </button>
  </th>
</thead>

<script>
  function filterTable() {
    // 获取所有筛选输入框
    const filterInputs = document.querySelectorAll('.filter-input');
    const table = document.getElementById("myTable");
    const rows = table.getElementsByTagName("tr");

    // 遍历每一行
    for (let i = 0; i < rows.length; i++) {
      const row = rows[i];
      let isMatch = true; // 默认该行符合所有条件

      // 遍历每个筛选条件
      filterInputs.forEach(input => {
        const filterValue = input.value.trim().toUpperCase();
        const columnIndex = parseInt(input.dataset.column);
        
        // 如果筛选框为空，跳过该条件
        if (!filterValue) return;

        const cell = row.getElementsByTagName("td")[columnIndex];
        if (cell) {
          const cellText = cell.textContent.trim().toUpperCase();
          // 如果当前列不匹配筛选条件，标记该行不符合
          if (cellText.indexOf(filterValue) === -1) {
            isMatch = false;
          }
        }
      });

      // 根据是否匹配设置行的显示状态
      row.style.display = isMatch ? "" : "none";
    }
  }
</script>

额外优化（可选） #

如果想要支持实时筛选（输入时自动触发筛选，无需点击按钮），可以在页面加载完成后给所有筛选框绑定input事件：

document.addEventListener('DOMContentLoaded', function() {
  const filterInputs = document.querySelectorAll('.filter-input');
  filterInputs.forEach(input => {
    input.addEventListener('input', filterTable);
  });
});

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