HTML/jQuery 中的循环表行答案

【问题标题】：Cycle table rows in HTML/jQueryHTML/jQuery 中的循环表行
【发布时间】：2011-06-12 13:27:21
【问题描述】：

我想始终显示前两行，我已经使用 .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>

【问题讨论】：

我会为前 2 行不变的行使用单独的表格
请注意，不要使用此选择器：tbody tr:#fixed。如果您有 ID，只需我们即可。 IE。把#fixed。这允许 jQuery/Sizzle 使用本机 getElementById() 函数，而不必在所有 tbody 标签中查找所有 tr 标签。也就是更快。

标签： jquery html html-table row

【解决方案1】：

你需要看看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>

【讨论】：

除非你真的想要一个间隔，即重复发生的事情。（实际上我更喜欢这种事情的间隔。）所以这是我个人的偏好，但是我是开放的，有什么理由不优选吗？

【解决方案2】：

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/

【讨论】：

谢谢，如果我有 3 行（而不是 2 行）交替，我需要更改哪些值？
编辑：没关系，我做到了。添加了一个额外的 var x = index + 2;