如何结合CSS :has()伪类与按钮点击控制表格行背景色

算力阿峰

2026-8-3

解决方案

修改后的CSS代码

tr td.no .group-check {
  display: none;
}

tr.group-process td.no .group-check {
  display: inline;
}

/* 仅当表格带有group-active类时，才应用选中行的背景色 */
.table-order.group-active tbody tr.group-process:has(td.no i[class$="fa-check-square"]) {
  background-color: #9e9;
}

修改后的jQuery代码

var $groupProcessingContainer = jQuery('.group-processing');
var $groupProcessingTable = jQuery('.table-order');

jQuery('#group_processing_button').click(function() {
  // 批量切换表格行的group-process类
  $groupProcessingTable.find('tbody tr').toggleClass('group-process');
  
  // 切换区块显示状态，动画完成后更新表格控制类
  $groupProcessingContainer.slideToggle(function() {
    // 根据区块可见性，给表格添加/移除group-active类
    $groupProcessingTable.toggleClass('group-active', $groupProcessingContainer.is(':visible'));
  });
});

改动说明

CSS部分：给背景色样式添加.table-order.group-active前缀，确保只有当表格被标记为group-active时，选中行的背景色才会生效，同时简化了:has选择器的写法。
jQuery部分：
1. 用toggleClass替代循环判断，批量处理表格行的类切换，代码更简洁高效。
2. 在slideToggle的回调中，根据区块的显示状态给表格添加或移除group-active类，精准控制CSS背景色样式的生效时机。
3. 利用:visible选择器准确判断区块状态，保证类切换逻辑的正确性。