Question

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

当用户将鼠标悬停在一个表格中时，以下jQuery可以很好地突出显示一行：

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

请注意，:not(:first-child)会阻止标题突出显示。

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

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

编辑：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>

Answer 1

诀窍是抓住开头的所有<tr>，然后合并$(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选择器）是基于一个的，并且同时在两个行上摆弄类。

Answer 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/

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

2 个答案: