如何在交互式报表中创建动态动作：选数字后展示分支“004”的数据

1. 适配的HTML结构示例 #

假设你的页面结构如下（可根据实际情况调整元素ID和列位置）：

<!-- 分支选择下拉菜单 -->
<select id="branchSelector">
  <option value="">全部</option>
  <option value="004">004</option>
  <option value="001">001</option>
  <option value="002">002</option>
</select>

<!-- 报表表格 -->
<table id="reportTable">
  <thead>
    <tr>
      <th>分支</th>
      <th>销售额</th>
      <th>日期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>004</td>
      <td>¥12000</td>
      <td>2024-05-01</td>
    </tr>
    <tr>
      <td>001</td>
      <td>¥8000</td>
      <td>2024-05-02</td>
    </tr>
    <tr>
      <td>004</td>
      <td>¥15000</td>
      <td>2024-05-03</td>
    </tr>
  </tbody>
</table>

2. 原生JavaScript实现代码 #

直接用原生JS就能完成动态筛选，无需依赖框架：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取核心元素
  const branchSelector = document.getElementById('branchSelector');
  const tableBody = document.querySelector('#reportTable tbody');

  // 监听下拉菜单选择事件
  branchSelector.addEventListener('change', function() {
    const targetBranch = this.value.trim();
    const rows = tableBody.querySelectorAll('tr');

    // 遍历所有表格行，判断是否显示
    rows.forEach(row => {
      // 获取当前行的分支值（假设分支在第1列，若位置不同修改nth-child的参数）
      const currentBranch = row.querySelector('td:nth-child(1)').textContent.trim();
      
      if (targetBranch === '' || currentBranch === targetBranch) {
        row.style.display = 'table-row';
      } else {
        row.style.display = 'none';
      }
    });
  });
});

3. 关键注意点 #

• 列位置适配：如果你的分支列不在表格第1列，把td:nth-child(1)改成对应列的序号（比如第3列就是td:nth-child(3)）。
• 动态渲染场景：如果报表数据是后端异步加载的，要把上述JS代码放在数据渲染完成的回调函数里，确保表格行已经存在于DOM中。
• 样式兼容：用table-row而不是空字符串，避免部分浏览器样式异常。

内容的提问来源于stack exchange，提问作者Yaw Owusu Amoako