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

您需要查看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>

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

在HTML / jQuery中循环表行

2 个答案: