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

Posted

技术标签:

【中文标题】悬停时突出显示每个表格对应元素的行和列【英文标题】:Highlighting row and column of corresponding element of each table on hover 【发布时间】:2015-04-21 05:38:36 【问题描述】:

我有两张并排的桌子:

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

当我将鼠标悬停在任何表格上的元素上时,我希望另一个表格上的相应元素也被突出显示(即,如果我将鼠标悬停在一个表格上索引为 [0,0] 的元素上,我希望相应的元素另一个表上的索引 [0,0] 也将突出显示)。

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

【问题讨论】:

另一张桌子在哪里 在外表,我有两个内表,这就是我所说的表。 【参考方案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/

【讨论】:

可以考虑进行一些优化以使其更快一点,但您明白了..您也可以单独阅读行索引和单元格索引并使用它,如果您选择但最重要的是停止使用表格布局。 :)

以上是关于悬停时突出显示每个表格对应元素的行和列的主要内容,如果未能解决你的问题,请参考以下文章

选择 QTableWidget 中的行和列,同时保持突出显示

我们如何在 ext js 4.2 中突出显示网格面板的行和列?

HTML表格在悬停时突出显示除第一行(标题)之外的行

AngularJS 中的数独

选择表格行并使用 Twitter Bootstrap 保持突出显示

悬停时突出显示整个表格行