如何为同层级元素应用样式？点击TD实现整行样式修改方案

CSS 方案（现代浏览器） #

可以利用 CSS 的 :has() 伪类实现需求，它能选中包含指定子元素的父元素。当任意一个 .td 获得焦点时，通过父元素 .tr 选中其下所有同级 .td：

/* 当tr下有任意td:focus时，给该tr内所有td设置背景色 */
.tr:has(.td:focus) .td {
  background-color: #e0f2fe; /* 替换为你需要的选中背景色 */
}

/* 可选：移除单个td:focus的默认样式，避免视觉冲突 */
.td:focus {
  outline: none;
}

注：has() 伪类目前已被 Chrome、Firefox 121+、Safari 等现代浏览器支持，若需兼容旧版浏览器，可采用下方 JavaScript 方案。

JavaScript 方案（全浏览器兼容） #

由于无法修改 HTML，可通过监听焦点事件动态给目标行的所有 .td 添加/移除样式类：

// 获取所有.td元素
const tds = document.querySelectorAll('.td');

tds.forEach(td => {
  // 给普通td添加tabindex，确保能获得焦点
  td.setAttribute('tabindex', '0');

  // 焦点进入时，给整行td添加选中类
  td.addEventListener('focus', function() {
    const tr = this.closest('.tr');
    tr.querySelectorAll('.td').forEach(cell => cell.classList.add('row-selected'));
  });

  // 焦点离开时，移除整行选中类
  td.addEventListener('blur', function() {
    const tr = this.closest('.tr');
    tr.querySelectorAll('.td').forEach(cell => cell.classList.remove('row-selected'));
  });
});

对应的 CSS 样式：

.row-selected {
  background-color: #e0f2fe; /* 选中行的背景色 */
}

.td:focus {
  outline: none;
}

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