跨两个表添加jQuery悬停效果_Jquery_Css_Html Table_Jquery Selectors

跨两个表添加jQuery悬停效果

jquery css

跨两个表添加jQuery悬停效果,jquery,css,html-table,jquery-selectors,Jquery,Css,Html Table,Jquery Selectors,我在divs中有两个HTML表，它们相邻浮动。第二个div可以在水平方向上滚动，因此实际上它看起来像一个大表，其中前几列“冻结”，其他列可以滚动当用户将鼠标悬停在一个表中的行上时，以下jQuery非常适合突出显示该行： $("table.grid tr:not(:first-child)") .hover( function () { $(this).addClass("highlight"); }, function () { $(this).removeClass("h

我在

div

s中有两个HTML表，它们相邻浮动。第二个

div

可以在水平方向上滚动，因此实际上它看起来像一个大表，其中前几列“冻结”，其他列可以滚动

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

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

请注意，

：not（：first child）

防止突出显示标题

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

网格类

）

换句话说，如果我将鼠标悬停在任一表中的

th行上，则两个表中的

th行都会高亮显示

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


最后的
史密斯约翰
测试1测试2
50%70%

诀窍是从开头抓取所有的

s，然后合并，然后

：n个子项

一次在两个表中选择正确的行：

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');
    }
);

演示：

index

调用提供了在

$trs

中相对于其同级悬停的

的位置，然后按1进行调整，因为

index

是以零为基础的，但

：n子项（作为CSS选择器）是以一为基础的，同时在两行上摆弄全班。
以下是我得出的结论：
HTML:
JSFiddle:我花了10分钟准备自己的答案，这并不是完全浪费；“过滤器”部分是我从穆的答案中学到的缺失部分，正如小提琴所示，这一点是正确的。
<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>

$(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
    });
});