HTML表格设置rowspan后如何为整行添加边框高亮标识选中状态

带rowspan表格整行高亮实现方案 #

方案1：CSS原生实现（现代浏览器兼容，推荐） #

主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+，覆盖95%以上全球用户）支持:has()选择器，无需修改原有HTML结构即可实现：
首先补充CSS代码：

/* 先开启表格边框合并，消除边框间隙 */
.main-table {
  border-collapse: collapse;
  width: 100%;
}

/* 选中行普通单元格的高亮样式：青色边框+半透青色背景，可自行调整色值 */
.main-table tr.highlight td {
  border-top: 2px solid cyan;
  border-bottom: 2px solid cyan;
  background-color: rgba(0, 255, 255, 0.2) !important;
}

/* 补全选中行首尾单元格的左右边框 */
.main-table tr.highlight td:first-child {
  border-left: 2px solid cyan;
}
.main-table tr.highlight td:last-child {
  border-right: 2px solid cyan;
}

/* 核心规则：匹配所有rowspan覆盖当前选中行的单元格，同步应用高亮 */
.main-table td:has(+ tr.highlight, + tr ~ tr.highlight) {
  border-top: 2px solid cyan;
  border-bottom: 2px solid cyan;
  background-color: rgba(0, 255, 255, 0.2) !important;
}

/* 补全最左侧跨列单元格的左边框 */
.main-table td:first-child:has(+ tr.highlight, + tr ~ tr.highlight) {
  border-left: 2px solid cyan;
}

需要选中某行时，直接给对应<tr>标签添加highlight类即可，比如选中第4行代码为<tr class="highlight">。

方案2：兼容低版本浏览器的JS实现 #

如果需要兼容不支持:has()的老旧浏览器，可以通过JS动态计算跨列单元格的覆盖范围，同步添加高亮：
首先补充基础CSS：

.main-table {
  border-collapse: collapse;
  width: 100%;
}
/* 高亮通用样式 */
.main-table .highlight {
  border: 2px solid cyan;
  background-color: rgba(0, 255, 255, 0.2) !important;
}

添加JS逻辑：

// 示例为点击行触发高亮，也可根据业务需求主动调用高亮逻辑
document.querySelectorAll('.main-table tr').forEach(tr => {
  tr.addEventListener('click', () => {
    // 移除所有已有高亮
    document.querySelectorAll('.main-table .highlight').forEach(el => el.classList.remove('highlight'))
    // 给当前选中行加高亮
    tr.classList.add('highlight')
    const currentRowIdx = Array.from(tr.parentElement.children).indexOf(tr)
    // 遍历所有带rowspan的单元格，判断是否覆盖当前选中行
    document.querySelectorAll('.main-table td[rowspan]').forEach(td => {
      const rowspanVal = parseInt(td.getAttribute('rowspan'))
      const parentRowIdx = Array.from(td.parentElement.parentElement.children).indexOf(td.parentElement)
      if (currentRowIdx >= parentRowIdx && currentRowIdx < parentRowIdx + rowspanVal) {
        td.classList.add('highlight')
      }
    })
  })
})

两种方案都可以实现包含rowspan区域的完整整行高亮效果，边框和背景都会覆盖跨行单元格的对应位置。

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