如何实现HTML表格悬停时高亮行列且当前单元格颜色不同？

需求：鼠标悬停表格单元格时，在保持整行、整列高亮的前提下，让当前悬停的单元格显示区别于行列的特殊颜色。现有基础代码如下：

<html>
<head>
    <title></title>
    <style>
        .hovered {
            background-color: teal;
        }
    </style>
    <script src="Scripts\jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>row1 col1</td>
            <td>row1 col2</td>
            <td>row1 col3</td>
        </tr>
        <tr>
            <td>row2 col1</td>
            <td>row2 col2</td>
            <td>row2 col3</td>
        </tr>
        <tr>
            <td>row3 col1</td>
            <td>row3 col2</td>
            <td>row3 col3</td>
        </tr>
    </table>
    <script>
        $(document).ready(function () {
            $('td').hover(function () {
                $(this).parent('tr').toggleClass('hovered');
                $('td:eq(' + this.cellIndex + ')', 'tr').toggleClass('hovered');
            });
        });
    </script>
</body>
</html>

修改方案 #

只需两步即可实现需求：

1. 新增当前单元格的样式类，确保其优先级高于行列高亮类
2. 在悬停事件中为当前单元格添加/移除专属样式类

修改后的完整代码

<html>
<head>
    <title></title>
    <style>
        .hovered {
            background-color: teal;
        }
        /* 为当前悬停单元格设置特殊颜色，选择器权重更高以覆盖行列样式 */
        td.current-cell {
            background-color: #ffd700;
        }
    </style>
    <script src="Scripts\jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>row1 col1</td>
            <td>row1 col2</td>
            <td>row1 col3</td>
        </tr>
        <tr>
            <td>row2 col1</td>
            <td>row2 col2</td>
            <td>row2 col3</td>
        </tr>
        <tr>
            <td>row3 col1</td>
            <td>row3 col2</td>
            <td>row3 col3</td>
        </tr>
    </table>
    <script>
        $(document).ready(function () {
            $('td').hover(function () {
                $(this).parent('tr').toggleClass('hovered');
                $('td:eq(' + this.cellIndex + ')', 'tr').toggleClass('hovered');
                // 为当前单元格添加/移除专属样式类
                $(this).toggleClass('current-cell');
            });
        });
    </script>
</body>
</html>

关键说明

• CSS中使用td.current-cell作为选择器，权重高于.hovered，因此当前单元格的颜色会覆盖行列的高亮色
• 悬停事件中通过toggleClass同步处理行列高亮类和当前单元格专属类，确保鼠标移入移出时样式正确切换

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