如何实现表格1应用筛选时显示表格2，否则默认隐藏？

这个需求完全可以实现，仅需搭配简单的CSS和JavaScript代码即可完成，具体实现方案如下：

1. 配置表格2默认隐藏的样式 #

给表格2的外层容器新增自定义类（比如main-list-container），添加如下CSS规则即可实现页面加载时自动隐藏：

.main-list-container {
  display: none;
}

如果不想新增类，也可以直接给表格2的现有容器设置默认display: none属性。

2. 给表格1行绑定点击显示逻辑 #

给表格1的所有数据行绑定点击事件，在触发你已完成的筛选逻辑后，将表格2的显示状态改为可见即可，示例代码如下：

// 按需替换为你实际页面中对应元素的选择器
const table1Rows = document.querySelectorAll('.s-table:first-of-type tbody tr');
const table2Container = document.querySelector('.main-list-container');

table1Rows.forEach(row => {
  row.addEventListener('click', function() {
    // 取当前行第一列的Name字段值
    const selectedName = this.querySelector('td:first-child').textContent.trim();
    // 调用你已经开发完成的筛选方法
    yourExistingFilterFunction(selectedName);
    // 显示表格2
    table2Container.style.display = 'block';
  });
});

可选优化 #

如果需要实现点击同一行切换表格2的显示/隐藏状态，可以把显示逻辑替换为如下判断：

row.addEventListener('click', function() {
  const selectedName = this.querySelector('td:first-child').textContent.trim();
  yourExistingFilterFunction(selectedName);
  // 切换显示状态
  table2Container.style.display = table2Container.style.display === 'block' ? 'none' : 'block';
});

如果页面内存在多个同类表格，建议给两个表格分别设置唯一的id属性（比如id="latest-table"、id="all-records-table"），通过id选择器获取元素可以避免匹配错误。

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