Циклические строки таблицы в HTML / jQuery

Question

Я хочу всегда показывать первые две строки, которые я сделал с помощью .show ().А также хочу показать и циклически следующие 4 строки, по 2 за раз.Таким образом, в моей таблице должны отображаться 4 строки: верхние 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);
}

---

рабочий пример: 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>