HTML/jQueryのサイクルテーブルの行

Question

.show（）を使用して最初の2行を常に表示します。また、次の4行を一度に2つずつ表示して循環させたい。 したがって、テーブルの4行はテーブルに表示され、上部2は固定され、下部2行は次の2行、たとえば5秒ごとに置き換えられます。

私のjQueryのコード

<script type="text/javascript"> 
     $(document).ready(function() { 
     $('tbody tr:even').css('background-color', '#114c00');  
     ticker(); 

     }); 

     function ticker(){ 
     $("tbody tr:#fixed").show(); 
     $("tbody tr:.hidden").hide(1000); 
     } 
</script> 

マイHTML

<table id="gradient-style" summary="Currency"> 
    <thead> 
     <tr> 
      <th scope="col" class="flag"></th> 
      <th scope="col" class="currency"></th> 
      <th scope="col" class="title"></th> 
      <th scope="col" class="buy">We Buy</th> 
      <th scope="col" class="sell">We Sell</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr id="fixed"><!----FIXED ROWS---> 
      <td class="flags"><img src="flags/USD.png" /></td> 
      <td >USD</td> 
      <td>US DOLLAR</td> 
      <td class="value"><span>3.1</span></td> 
      <td class="value"><span>3.1</span></td> 

     </tr> 
     <tr id="fixed"><!----FIXED ROWS----> 
      <td class="flags"><img src="flags/EUR.png" /></td> 
      <td>EUR</td> 
      <td>EURO</td> 
      <td class="value"><span>5.10</span></td> 
      <td class="value"><span>3.1</span></td> 
      </div> 

     <tr class="hidden"> <!--THIS SHOWS FIRST----> 
      <td class="flags"><img src="flags/CAD.png" /> </td> 
      <td>CAD</td> 
      <td>CANADIAN DOLLAR</td> 
      <td class="value"><span>8.10</span></td> 
      <td class="value"><span>3.1</span></td> 
     </tr> 

     <tr class="hidden"><!---THIS SHOWS FIRST---> 
      <td class="flags"><img src="flags/CNY.png" /> </td> 
      <td>CNY</td> 
      <td>CHINA YUAN</td> 
      <td class="value"><span>8.10</span></td> 
      <td class="value"><span>3.1</span></td> 
     </tr> 


     <tr class="hidden"><!---THIS REPLACES THE ROWS ABOVE---> 
      <td class="flags"><img src="flags/CNY.png" /> </td> 
      <td>CNY</td> 
      <td>CHINA YUAN</td> 
      <td class="value"><span>8.10</span></td> 
      <td class="value"><span>3.1</span></td> 
     </tr> 
     <tr class="hidden"><!---THIS REPLACES THE ROWS ABOVE---> 
      <td class="flags"><img src="flags/CAD.png" /> </td> 
      <td>CAD</td> 
      <td>CANADIAN DOLLAR</td> 
      <td class="value"><span>8.10</span></td> 
      <td class="value"><span>3.1</span></td> 
     </tr> 

    </tbody> 
</table> 

Answer 1

var max = 0; 
var index = 0; 

$(function() { 
    $('tbody tr:visible:even').css('background-color', '#114c00'); 
    max = $("tbody tr.hidden").length; 
    ticker(); 
}); 

function ticker() { 
    // hide all visible tr's with hidden class 
    $("tbody tr.hidden:visible").hide(); 

    var l = index; // low 
    var h = index + 1; // high 
    $("tbody tr.hidden:hidden").filter(":eq(" + l + "), :eq(" + h + ")").show(); 

    // manage index 
    index += 2; 
    if (index >= max) index = 0;  

    // reset timer 
    setTimeout("ticker()", 1000); 
} 

---

作業例： `TBODY：http://jsfiddle.net/5vasr/

Answer 2

あなたはのsetIntervalを見てする必要があります。

https://developer.mozilla.org/en/DOM/window.setInterval

あなたの現在のコードは一度だけ発生します。繰り返すように間隔を設定します。

編集：これはjavascriptのためのこのようなもので、未テスト、未試行ですが、開始する必要があります。

<script type="text/javascript"> 

$(document).ready(function() { 
    var myInterval = false; 
    $(document).ready(function(){ 

     //execute this function every 10 seconds 
     myInterval = setInterval(function(){ 

      //show the first 2 matched selectors 
      $('tr.hidden:lt(2)').removeClass('hidden').show(); 

      //stop the loop when we are out of elements with the class "hidden" 
      if($('tr.hidden').length == 0){ 
       clearInterval(myInterval); 
      } 
     }, 10000); 

    }); 
}); 

</script>