HTML tablo satır kaydırma olay = 0

CSS koduHTML tablo satır kaydırma olay = 0

table { 
     width: 100%; 
} 

.highlight { 
     background: red; 
} 

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

HTML kodu

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

komut Var kadar vurgulanır; işlevi 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);

Hedef: my ilgili satır vurgulanmalıdır spesifik üst konuma sonra Tomardaki üzerinde

Zorluk: şu anda ben o zaman ilgili satır yapabilirsiniz vurgulanan yapıyor sert kodlanmış değeri kullanılarak ve değerini kontrol ediyorum Birden fazla satır tablosuna sahip olduğumda sabit kodlanmış çekime sahip olduğum kodun yukarısına bakın.

Bu sorunu en iyi şekilde nasıl kullanacağımı biliyorsunuz.

kaynak

2016-04-07 pankaj98

bu nedenle mantık nedir, ne zaman tr: eq (1) ve ne zaman tr: eq (2) vurgulanmalıdır, sadece sabit kodlanmış değerler sağlamanız içindir –