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

标签 jquery html css html-table hover

我有两张并排的 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>

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

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

最佳答案

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

关于jquery - 在悬停时突出显示每个表的相应元素的行和列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28613786/

相关文章:

Jquery ui 选项卡 - 为什么 ui 选项卡由 'li' 标签包裹?

css - Google Chrome 中的字体呈现问题

css - Font-Awesome 字体错误 404

javascript - 从我的 jQuery 插件中移除延迟

jquery - Bootstrap 表单不显示内联

javascript - jquery comet 长轮询和流式教程?

javascript - 添加 h1 标签时 Lightgallery 不工作?

css - Bootstrap : Responsive nav-menu

javascript - rails : redirect with call to Ajax

javascript - 按钮未在表单内禁用