如何在鼠标悬停时突出显示不相邻的表格单元格？

Question

我正在尝试为循环风格的锦标赛设置鼠标悬停突出显示效果，以便当有人将鼠标放在球员A对球员B的结果上时，该单元格以及显示球员B对球员A的结果的单元格都会突出显示。为了说明这一点，这里是我想突出显示的页面：http://yppc.zzl.org/groups.html。我还没有找到一个可以同时突出显示不相邻单元格的鼠标悬停脚本。我在另一个网站上看到了这种影响，但不幸的是，联盟没有开会，比分已经被记下来了。

感谢您所能提供的任何帮助！

Answer 1

尝试如下所示：

<html>
    <head>
        <script>
            function hl(cell, enable)
            {
                var rIndex = cell.cellIndex;
                var cIndex = cell.parentNode.rowIndex;
                var cell2 = cell.parentNode.parentNode.rows[rIndex].cells[cIndex];

                if (enable) {
                    cell.style.backgroundColor = '#000';
                    cell2.style.backgroundColor = '#000';
                } else {
                    cell.style.backgroundColor = '#fff';
                    cell2.style.backgroundColor = '#fff';
                }
            }
        </script>
    </head>
    <body>
        <table border="1">
            <tr>
                <td></td>
                <td>A</td>
                <td>B</td>
                <td>C</td>
            </tr>
            <tr>
                <td>A</td>
                <td></td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">A:B</td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">A:C</td>
            </tr>
            <tr>
                <td>B</td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">B:A</td>
                <td></td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">B:C</td>
            </tr>
            <tr>
                <td>C</td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">C:A</td>
                <td onmouseover="hl(this, true)" onmouseout="hl(this, false)">C:B</td>
                <td></td>
            </tr>
        <table>
    </body>
</html>