在HTML / jQuery中循环表格行 | jQuery中循环表格行

本文介绍了在HTML / jQuery中循环表格行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想始终显示前两行，这是我使用.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-stylesummary =Currency> 
< thead> 
< tr> 
< th scope =colclass =flag>< / 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> <！ - 首先显示----> 
< td class =flags>< img src =flags / CAD.png/> < / TD> 
< td> CAD< / td> 
< td>加拿大元< / 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>中国元< / td> 
< td class =value>< span> 8.10< / span>< / td> 
< td class =value>< span> 3.1< / span>< / td> 
< / tr> 
 
 
< tr class =hidden><！---这取代了上面的行---> 
< td class =flags>< img src =flags / CNY.png/> < / TD> 
< td> CNY< / td> 
< td>中国元< / td> 
< td class =value>< span> 8.10< / span>< / td> 
< td class =value>< span> 3.1< / span>< / td> 
< / tr> 
< tr class =hidden><！---这取代了上面的行---> 
< td class =flags>< img src =flags / CAD.png/> < / TD> 
< td> CAD< / td> 
< td>加拿大元< / td> 
< td class =value>< span> 8.10< / span>< / td> 
< td class =value>< span> 3.1< / span>< / td> 
< / tr> 
 
< / tbody> 
< / table>

解决方案

var max = 0; var index = 0; $ b $（函数（）{ $（'tbody tr：visible：even'）。css（'background-color'，'＃114c00'）; max = $（tbody tr.hidden）。length; ticker（）; }）; 函数ticker（）{ //用隐藏的类隐藏所有可见的tr $（tbody tr.hidden：visible）。hide（）; var l = index; // low var h = index + 1; //（高） $（tbody tr.hidden：hidden）。filter（：eq（+ l +），：eq（+ h +））。 //管理索引索引+ = 2; if（index> = max）index = 0; //重置计时器 setTimeout（ticker（），1000）; }

工作示例：

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>

解决方案

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/

这篇关于在HTML / jQuery中循环表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！