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

时间：2021-10-25 21:23:07

I have two tables side by side with each other as such:

我有两张桌子并排在一起：

<!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>

When I hover over an element on any table, I want the corresponding element on the other table to be highlighted as well (i.e. if I hover over element with index [0,0] on one table, I want the corresponding element with index [0,0] on the other table to be highlighted as well).

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

I've used the suggestion here http://jsfiddle.net/rhyu3r0r/ to perform this action on one table (however, instead of toggleClass, I used addClass and removeClass). How would I go about doing the above action?

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

1 个解决方案

#1

1  

here is one way of doing it, would be a lot easier if the tables had id's but this works too:

这是一种方法，如果表有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/

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

#1

1  

here is one way of doing it, would be a lot easier if the tables had id's but this works too:

这是一种方法，如果表有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/

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

标签：

相关文章