悬停时如何高亮所有同data-index值的表格单元格

问题场景 #

我手头有一个通用表格，已为其中的单元格添加了带取值的自定义属性data-index，表格代码如下：

<table>
    <tr> <td data-index="1"></td> <td data-index="2"></td> <td data-index="3"></td> <td data-index="4"></td></tr>
    <tr> <td data-index="1"></td> <td data-index="2"></td> <td data-index="3"></td> <td data-index="4"></td></tr>
    <tr> <td data-index="1"></td> <td data-index="2"></td> <td data-index="3"></td> <td data-index="4"></td></tr>
    <tr> <td data-index="1"></td> <td data-index="2"></td> <td data-index="3"></td> <td data-index="4"></td></tr>
</table>

我最初想确认是否可以纯通过CSS控制所有data-index属性值相同的元素样式，一开始设想的CSS写法是这样的：

td[data-index.value]:hover{
    background-color: red;
}

核心需求：当鼠标悬停在某个td元素上时，所有与该元素data-index取值相同的td（比如所有data-index="1"的单元格）都应用高亮样式，实现表格垂直列高亮的交互效果。

实现方案 #

纯CSS没有提供动态匹配当前触发元素属性值、批量选中同属性值元素的能力，没法直接实现这个效果，这里给出基于TypeScript + React的可行实现，供有相同需求的开发者参考：

const handleColumnHoverEnter = (e: any) => {
    const allWithAttribute = Array.from(
        document.querySelectorAll("[data-index='" + e.target.dataset.index + "']")
      );
      allWithAttribute.forEach((element:any) => {
        element.style.backgroundColor = 'red';
      });
  }

  const handleColumnHoverLeave = (e: any) => {
    const allWithAttribute = Array.from(
        document.querySelectorAll("[data-index='" + e.target.dataset.index + "']")
      );
      allWithAttribute.forEach((element:any) => {
        element.style.backgroundColor = 'white';
      });
  }

实现逻辑非常直白：

• 鼠标移入单元格时，先拿到当前单元格的data-index属性值
• 用属性选择器查出页面上所有带相同data-index值的元素
• 遍历元素集合，统一给它们加上高亮背景色
• 鼠标移出单元格时，走同样的查询逻辑，把对应元素的背景色改回默认即可

如果是遵循React最佳实践开发，更推荐通过组件状态控制类名切换的方式实现，尽量避免直接手动操作DOM样式，上面的示例是最容易理解的基础实现版本。

感谢bloodyKnucklese和t.niese提供的思路建议。

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