基于复选框控制表格列并隐藏含空td行的JS/JQuery实现问题

需求说明 #

有一个带颜色复选框的HTML表格，复选框用来控制对应颜色列的显示/隐藏。要求实现：当用户勾选颜色列时，自动隐藏不具备该颜色的鱼类行——也就是只要当前显示的颜色列里有任意一个<td>为空，就隐藏该行。

完整解决方案 #

HTML 结构 #

<!-- 颜色过滤复选框 -->
<div class="color-filters">
  <label><input type="checkbox" class="color-checkbox" data-column="red" checked> 红色</label>
  <label><input type="checkbox" class="color-checkbox" data-column="blue" checked> 蓝色</label>
  <label><input type="checkbox" class="color-checkbox" data-column="green" checked> 绿色</label>
</div>

<!-- 鱼类信息表格 -->
<table id="fish-table">
  <thead>
    <tr>
      <th>鱼类名称</th>
      <th class="color-column red">红色</th>
      <th class="color-column blue">蓝色</th>
      <th class="color-column green">绿色</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>金鱼</td>
      <td>有</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>蓝鲨</td>
      <td></td>
      <td>有</td>
      <td></td>
    </tr>
    <tr>
      <td>绿河豚</td>
      <td></td>
      <td></td>
      <td>有</td>
    </tr>
    <tr>
      <td>彩虹鱼</td>
      <td>有</td>
      <td>有</td>
      <td>有</td>
    </tr>
  </tbody>
</table>

CSS 样式 #

/* 隐藏列的样式 */
.color-column.hidden {
  display: none;
}

/* 隐藏行的样式 */
#fish-table tbody tr.hidden {
  display: none;
}

jQuery 逻辑代码 #

$(document).ready(function() {
  // 页面加载完成后先执行一次过滤
  filterFishRows();

  // 监听复选框的状态变化
  $('.color-checkbox').on('change', function() {
    // 切换对应颜色列的显示/隐藏
    const columnClass = $(this).data('column');
    $(`.color-column.${columnClass}`).toggleClass('hidden', !$(this).is(':checked'));
    
    // 重新过滤行
    filterFishRows();
  });

  // 核心的行过滤函数
  function filterFishRows() {
    // 收集当前可见的颜色列的索引
    const visibleColorCols = [];
    $('.color-column:not(.hidden)').each(function() {
      visibleColorCols.push($(this).index());
    });

    // 遍历所有数据行，判断是否显示
    $('#fish-table tbody tr').each(function() {
      let keepVisible = true;
      const $currentRow = $(this);

      // 检查当前行在可见颜色列中的td是否为空
      visibleColorCols.forEach(colIndex => {
        const cellText = $currentRow.find(`td:eq(${colIndex})`).text().trim();
        if (cellText === '') {
          keepVisible = false;
        }
      });

      // 根据判断结果切换行的显示状态
      $currentRow.toggleClass('hidden', !keepVisible);
    });
  }
});

关键逻辑说明 #

1. 复选框与列关联：通过data-column属性把复选框和对应的表格列类名绑定，切换列的显示/隐藏更直观。
2. 行过滤逻辑：每次复选框变化时，先收集当前可见的颜色列索引，再遍历每一行——只要该行在任意可见颜色列的<td>为空，就隐藏该行。
3. 文本去空格处理：用trim()去除单元格文本的前后空格，避免因空格导致的误判。

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