2つのテーブルにjQueryのホバー効果を追加する

divの2つのHTMLテーブルが隣り合っています。 2番目のdivは水平方向にスクロール可能であるため、実際には最初の数行が「フリーズ」し、他の数列はスクロールできる大きなテーブルのように見えます。 :not(:first-child)が強調表示されているヘッダを防止すること2つのテーブルにjQueryのホバー効果を追加する

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

注：

以下のjQueryは、ユーザがその上に置いたときのテーブルの行をハイライトするために素晴らしい作品。

これを修正して、他のテーブルの対応する行（また、クラスはgrid）をハイライト表示することはできますか？

つまり、いずれかの表のn行目にカーソルを合わせると、両方の表のn行目が強調表示されます。

EDIT：トリックの両方のテーブルに右の行を選択するために、最初にすべての<tr>秒をつかむと、その後$(this).index()を組み合わせ、filter、および:nth-childことです

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

出典

2011-10-26 James

：のようにHTMLに見えます一度：

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/

indexindexコールでは、$trsで兄弟に対してホバリングされた<tr>の位置が与えられます。indexはゼロベースですが、:nth-child（CSSセレクタ）は1ベースであり、一度に両方の行にクラスを追加します。ここで

出典

2011-10-26 03:56:13

10分完全に無駄ではなかった。「フィルター」の部分は私がムーの答えから学ばなければならない欠けている部分でした。 –

は私が考え出したものです：

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/

出典

2011-10-26 04:26:03 chrism

2つのテーブルにjQueryのホバー効果を追加する

答えて

関連する問題