在悬停时突出显示每个 table 对应元素的行和列

Question

我有两个 table 并排在一起：

<!DOCTYPE html>
    <table>
        <tr>
            <td>
                <table>
                    <tr><td>1</td><td>2</td><td>3</td></tr>
                    <tr><td>4</td><td>5</td><td>6</td></tr>
                    <tr><td>7</td><td>8</td><td>9</td></tr>
                </table>
            </td>
            <td>
                <table>
                    <tr><td>1</td><td>2</td><td>3</td></tr>
                    <tr><td>4</td><td>5</td><td>6</td></tr>
                    <tr><td>7</td><td>8</td><td>9</td></tr>
                </table>
            </td>
        </tr>
    </table>

当我将鼠标悬停在任何 table 上的元素上时，我希望另一个 table 上的相应元素也被突出显示（即，如果我将鼠标悬停在索引为 [0,0 的元素上） ] 在一个 table 上，我希望在另一个 table 上具有索引 [0,0] 的相应元素也被突出显示。

我使用此处的建议 http://jsfiddle.net/rhyu3r0r/ 对一个 table 执行此操作（但是，我使用的是 addClass 和 removeClass，而不是 toggleClass）。我将如何进行上述操作？

Answer 1

这是一种方法，如果表有 ID 会容易得多，但这也有效：

$('table table td').hover(function() {
    $this = $(this);
  $this.toggleClass('hovered');
    //which cell is selected
    cell = $this.closest("table").find("td").index(this);
   $this.closest("table").parent().siblings("td").find("td").eq(cell).toggleClass('hovered');
});

http://jsfiddle.net/rhyu3r0r/1/

在悬停时突出显示每个 table 对应元素的行和列

Highlighting row and column of corresponding element of each table on hover

html

css

jquery

html-table

hover