Cycle table rows in HTML/jQuery

Question

I want to always show the first two rows, which i have done using .show(). And also want to show and cycle the next 4 rows, 2 at a time. So the 4 rows should show in my table, top 2 are fixed and bottom 2 rows to be replaced by the next two rows, every 5 seconds for example.

My jQuery code

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

My 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);
}

---

working example: http://jsfiddle.net/5vasr/