纯JavaScript根据表格单元格内容筛选隐藏对应行实现咨询

实现方案 #

核心说明 #

• 要获取单元格所属的行，直接调用DOM元素的closest('tr')方法即可，会自动向上查找最近的<tr>父元素，不需要提前绑定id或class
• 动态生成的行也可以正常获取，因为选择器是实时查询DOM的
• 用Array.from()把DOM集合转成数组后即可调用filter方法做筛选

完整实现代码 #

首先给下拉框绑定change事件，选中值变化时触发筛选：

<select name="departments" id="Departments" onchange="changeDisplayTable()">
  <option value="empty">------</option>
  <option value="Department_1">Department_1</option>
  <option value="Department_2">Department_2</option>
  <option value="Department_3">Department_3</option>
  <option value="Department_4">Department_4</option>
</select>

重写筛选逻辑如下：

function changeDisplayTable() {
  // 1. 获取下拉框选中的部门值
  const selectedDept = document.getElementById('Departments').value.trim()
  // 2. 获取表格所有行，跳过表头行
  const allRows = Array.from(document.querySelectorAll('#table tr')).slice(1)
  // 3. 先重置所有行的显示状态
  allRows.forEach(row => row.style.display = 'table-row')

  // 4. 如果选中的是空占位选项，不筛选直接返回
  if (selectedDept === 'empty') return

  // 5. 用filter筛选出不匹配的行
  const unMatchedRows = allRows.filter(row => {
    // 获取当前行Department列（第6列，索引从0开始为5）的文本内容
    const currentDept = row.children[5].textContent.trim()
    // 不匹配的项返回true，会被筛选进隐藏列表
    return currentDept !== selectedDept
  })

  // 6. 隐藏所有不匹配的行
  unMatchedRows.forEach(row => row.style.display = 'none')
}

适配姓名筛选场景的修改点 #

如果你要实现示例里的按姓名筛选，只需要调整两个参数即可：

1. 把下拉框的选项替换为对应的姓名
2. 把筛选逻辑里的列索引从5改成0（姓名是表格第一列，索引从0开始计算），逻辑完全通用。

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