如何根据下拉选择判断tr显隐，实现表格筛选并收集显示元素到数组

嘿，我来帮你搞定这个需求！其实思路很简单，咱们通过给表格行加标记、监听选择器变化来实现，具体步骤和代码如下：

首先，咱们得先给表格里的每一行加上对应重要级别的标记，这样能方便后续匹配选择器的选项。然后通过监听选择器的变化，筛选出对应级别的行，同时把显示的行存入数组。

1. 补全HTML结构（完善你的代码） #

首先把你的select补全，同时给表格的tr加上data-importance属性，用来对应选择器的选项值：

<select id="mySelector" class="styled-select slate" style="width:280px; height:35px">
  <option value='important'>重要</option>
  <option value='middle important'>中等重要</option>
  <option value='not so important'>不太重要</option>
</select>

<!-- 示例表格，每行对应一个级别 -->
<table id="myTable">
  <!-- 如果有表头，记得给它加个class排除筛选 -->
  <tr class="header-row">
    <th>内容标题</th>
  </tr>
  <tr data-importance="important">
    <td>重要事项A</td>
  </tr>
  <tr data-importance="middle important">
    <td>中等事项B</td>
  </tr>
  <tr data-importance="not so important">
    <td>次要事项C</td>
  </tr>
  <tr data-importance="important">
    <td>重要事项D</td>
  </tr>
</table>

2. JavaScript逻辑实现 #

接下来写核心的筛选和数组存储逻辑，注释已经写得很清楚啦：

// 获取需要用到的DOM元素
const importanceSelector = document.getElementById('mySelector');
// 排除表头行，只获取数据行
const tableDataRows = document.querySelectorAll('#myTable tr:not(.header-row)');
// 用来存储当前显示的行元素的数组
let visibleRowElements = [];

// 封装筛选函数，方便重复调用
function filterTableRows(selectedLevel) {
  // 每次筛选前清空数组，保证数组和页面显示一致
  visibleRowElements = [];

  tableDataRows.forEach(row => {
    // 获取当前行的重要级别
    const rowLevel = row.getAttribute('data-importance');
    
    // 判断是否匹配选中的级别
    if (rowLevel === selectedLevel) {
      row.style.display = ''; // 显示该行
      visibleRowElements.push(row); // 把显示的行存入数组
    } else {
      row.style.display = 'none'; // 隐藏该行
    }
  });

  // 可以打印数组验证，实际项目里可以根据需求用这个数组做其他操作
  console.log('当前显示的行元素：', visibleRowElements);
}

// 监听选择器的变化事件
importanceSelector.addEventListener('change', function() {
  filterTableRows(this.value);
});

// 页面加载完成后，默认执行一次筛选，显示初始选中的选项对应的行
document.addEventListener('DOMContentLoaded', function() {
  filterTableRows(importanceSelector.value);
});

关键注意点 #

• 给表头行加class="header-row"并通过tr:not(.header-row)排除，避免表头被隐藏，如果你没有表头可以去掉这个逻辑
• 用data-*自定义属性来关联级别，比解析单元格内容更可靠，也更容易维护
• 数组visibleRowElements每次筛选都会重新赋值，确保里面的元素和页面上显示的完全一致，后续你可以用这个数组做批量操作（比如批量修改样式、获取内容等）

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