HTMLテーブルの行は、スクロールイベントで

Question

CSSコード

table { 
     width: 100%; 
} 

.highlight { 
     background: red; 
} 

.area { 
    position: relative; 
    height: 400px; 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 

HTMLコード

<div class="area"> 
<table border="1"> 
      <tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr> 

<tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr><tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr><tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr><tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr> 

</table 
</div> 

= 0スクリプト VARアップを強調しました。 function upAndDownHighlight（）{ var top = $（this）.scrollTop（）;

if (top > 30 && top < 60) { 
    $("table").find("tr").eq(1).addClass("highlight"); 
    } else if(top > 60 && top < 90) { 
    $("table").find("tr").eq(1).addClass("highlight"); 
    } 
    : 
    : 
    : 


    if (top < up) { 
     $("table").find("tr").removeClass("highlight"); 
    } 

    up = top; 
} 

$(".area").on("scroll", upAndDownHighlight); 

目標：今私は、ハードコーディングされた値を使用していますと、関連する行をやって値をチェックすることができます強調表示：私の関連する行が

難しさを強調しなければならない具体的なトップの位置が後のスクロールに上記のコードを参照してくださいどこで複数の行テーブルを持っているときに私は多くの条件を持ってハードコード化チェックを参照してください

誰もがこの問題を最適化する方法を知っています。

Answer 1

この方法で<tr>の位置を得ることができます。

Get the position of a div/span tag

し、[OK]を、あなたは今、あなたの状態を変更することができ、両方の場合は、

Get div height with plain JavaScript

以下の方法でご<tr>の高さを得ることができます。