在两个表格中添加 jQuery 悬停效果答案

【问题标题】：Add jQuery hover effect across two tables在两个表格中添加 jQuery 悬停效果
【发布时间】：2011-12-15 10:53:21
【问题描述】：

divs 中有两个 HTML 表格并排浮动。第二个div 可以在水平方向滚动，因此实际上它看起来像一个大表，其中前几列被“冻结”，其他列可以滚动。

当用户将鼠标悬停在表格上时，以下 jQuery 非常适合突出显示表格中的一行：

$("table.grid tr:not(:first-child)")
  .hover(
    function () { $(this).addClass("highlight"); },
    function () { $(this).removeClass("highlight"); }
  );

请注意，:not(:first-child) 可防止标头被突出显示。

我该如何修改它，以便它也突出显示另一个表中的相应行（也有一个 grid 类）？

换句话说，如果我将鼠标悬停在任一表中的nth 行上，则两个表中的nth 行都会突出显示。

编辑：HTML 看起来像：

<div>
  <div style="float: left">
    <table id="names" class="grid">
      <tr><th>Last</th><th>First</th></tr>
      <tr><td>Smith</td><td>John</td></tr>
      <!-- etc -->
      </table>
  </div>
  <div style="float: left; overflow-x: scroll">
    <table id="results" class="grid">
      <tr><th>Test 1</th><th>Test 2</th></tr>
      <tr><td>50%</td><td>70%</td></tr>
      <!-- etc -->
    </table>
  </div>
  <div style="clear: both">
  </div>
</div>

【问题讨论】：

标签： jquery css html-table jquery-selectors

【解决方案1】：

诀窍是在开头获取所有<tr>s，然后组合$(this).index()、filter 和:nth-child 一次在两个表中选择正确的行：

var $trs = $('table.grid tr:not(:first-child)');
$trs.hover(
    function() {
        var i = $(this).index() + 1;
        $trs.filter(':nth-child(' + i + ')').addClass('highlight');
    },
    function() {
        var i = $(this).index() + 1;
        $trs.filter(':nth-child(' + i + ')').removeClass('highlight');
    }
);

演示：http://jsfiddle.net/ambiguous/54thG/

index 调用为您提供了 <tr> 相对于 $trs 中的兄弟姐妹悬停的位置，然后您调整 1，因为 index 是从零开始的，但 :nth-child（作为 CSS selector) 是基于 1 的，并且会同时在两行上调整类。

【讨论】：

我花 10 分钟准备自己的答案并没有完全浪费。 “过滤器”部分是我从 mu 的答案中学到的缺失部分，正如小提琴所显示的那样。

【解决方案2】：

这是我想出来的：

HTML：

<html>
    <style>
    .highlight {background:gray;}
    </style>
    <body>
        <div>
            <div style="float: left">
                <table id="names" class="grid" style="width:200px">
                    <tr class="row0"><th style="width:40%">Last</th><th>First</th></tr>
                    <tr class="row1"><td>Smith</td><td>John</td></tr>
                    <tr class="row2"><td>Smith</td><td>John</td></tr>
                    <tr class="row3"><td>Smith</td><td>John</td></tr>
                    <tr class="row4"><td>Smith</td><td>John</td></tr>
                    <!-- etc -->
                </table>
            </div>
            <div style="float: left; overflow-x: scroll">
                <table id="results" class="grid" style="width:200px">
                    <tr class="row0"><th>Test 1</th><th>Test 2</th></tr>
                    <tr class="row1"><td>50%</td><td>70%</td></tr>
                    <tr class="row2"><td>50%</td><td>70%</td></tr>
                    <tr class="row3"><td>50%</td><td>70%</td></tr>
                    <!-- etc -->
                </table>
            </div>
            <div style="clear: both"></div>
        </div>
    </body>
</html>

JS：

$(document).ready(function() {
    $("table#names tr:not(:first-child)").each(function(k, v){
        var self = this;
        // index: 0 = second row; 1= 3rd row... of table#names 
        // index+1 for other table's row: .find('tr.row'+(index+1))
        (function(index){ 
            $(self).hover(
                function() {
                    $(this).addClass("highlight");                

                    // go up to parent div of #names, then its siblings, then the siblings' table's row
                    // you could also just $('table#results')
                    $('table#names').parent().siblings().find('tr.row'+(index+1)).addClass("highlight");
                }, function() {
  $('table#names').parent().siblings().find('tr.row'+(index+1)).removeClass("highlight");
                    $(this).removeClass("highlight");
                }
            );
        })(k); // pass index so function above remembers it
    });
});

JSFiddle：http://jsfiddle.net/6aNy2/

【讨论】：