在两个表中添加jQuery悬停效果 [英] Add jQuery hover effect across two tables

问题描述

我在 div 中有两个HTML表格，彼此相邻。第二个 div 可以在水平方向滚动，所以实际上它看起来像一个大表，其中前几列是'冻结'，其他的可以滚动。 p>

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

  $（table.grid tr：not（：first-child））
 .hover（
 function（）{$（this）.addClass }，
 function（）{$（this）.removeClass（highlight）;} 
）; 
  

注意：not（：first-child）防止标题被突出显示。

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

换句话说，如果我将鼠标悬停在 n



EDIT ：HTML如下所示：

 < div& 
< div style =float：left> 
< table id =namesclass =grid> 
< tr>< th>最后< / th>< th>第一< / th>< / tr> 
< tr>< td> Smith< / td>< td> John< / td>< / tr> 
<！ -  etc  - > 
< / table> 
< / div> 
< div style =float：left; overflow-x：scroll> 
< table id =resultsclass =grid> 
< tr>< th>测试1< / th>< th>测试2< / th>< / tr> 
< tr>< td> 50％< / td>< td> 70％< / td>< / tr> 
<！ -  etc  - > 
< / table> 
< / div> 
< div style =clear：both> 
< / div> 
< / div> 
  




解决方案

诀窍是抓住所有< tr> s，然后结合 $（this）。 index（） ， 过滤器 和：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 $ b $ trs.filter（'：nth-​​child（'+ i +'）'）removeClass（'highlight'）; 
} 
）; 
  

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

索引调用为您提供相对于 $ trs 中的兄弟姐妹悬停的< tr> 的位置， index 是从零开始的，但：nth-​​child 两个行上的类一次。

I have two HTML tables in divs floated next to each other. The second div is scrollable in the horizontal direction, so in effect it looks like one big table where the first few columns are 'frozen' and the others can be scrolled.

The following jQuery works great to highlight a row in one table when the user hovers over it:

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

Note that the :not(:first-child) prevents the header being highlighted.

How can I amend this so that it also highlights the corresponding row in the other table (which also has a class of grid)?

In other words, if I hover over the nth row in either table, then the nth rows in both tables are highlighted.

EDIT: The HTML looks like:

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

解决方案

The trick is to grab all the <tr>s at the beginning and then combine $(this).index(), filter, and :nth-child to select the right rows in both tables at once:

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

Demo: http://jsfiddle.net/ambiguous/54thG/

The index call gives you the position of the <tr> being hovered with respect to its siblings in $trs, then you adjust by 1 because index is zero-based but :nth-child (being a CSS selector) is one-based, and fiddle with the class on both rows at once.

这篇关于在两个表中添加jQuery悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！