显示/隐藏部分表条目

时间:2013-01-28 06:00:48

标签: javascript jquery html bsp

我有一个包含10行的html表。 我希望显示表的前5行5秒,接下来的5行再显示5秒。 当显示一组行时,应该隐藏另一组。

请帮助

谢谢&的问候,

ABK

3 个答案:

答案 0 :(得分:2)

这是在第一行和最后五行之间连续循环的粗略且准备好的方法:

$(document).ready(function() {
    var $rows = $("table tr"),
        i = 0;    
    function cycle() {
        $rows.hide();
        $rows.slice(i, i + 5).show();
        i = (i + 5) % $rows.length;
        setTimeout(cycle, 5000);
    }
    cycle();
});

http://jsfiddle.net/Lawu5/

答案 1 :(得分:1)

你需要将你的表分成两部分(div)然后使用setTimeout()和JQuery的toggle()来切换部分。试一试!

答案 2 :(得分:0)

好的,根据我对你的要求的理解,我编写了这个。请检查这是你想要的。!

<table width="100">
<tr class="first-five-tr">
    <td>first</td>
</tr>
<tr class="first-five-tr">
    <td>first</td>
</tr>
<tr class="first-five-tr">
    <td>first</td>
</tr>
<tr class="first-five-tr">
    <td>first</td>
</tr>
<tr class="first-five-tr">
    <td>first</td>
</tr>
<tr class="second-five-tr">
    <td>second</td>
</tr>
<tr class="second-five-tr">
    <td>second</td>
</tr>
<tr class="second-five-tr">
    <td>second</td>
</tr>
<tr class="second-five-tr">
    <td>second</td>
</tr>
<tr class="second-five-tr">
    <td>second</td>
</tr>
</table>
<script>
var hideFirstfive = null;
function hideSecondFive() {
$('.second-five-tr').hide();
$('.first-five-tr').show();
clearInterval(hideSecondfive);
hideFirstfive = setInterval(hideFirstFive, 5000);
}

function hideFirstFive() {
$('.first-five-tr').hide();
$('.second-five-tr').show();
clearInterval(hideFirstfive);
hideSecondfive = setInterval(hideSecondFive, 5000);
}

var hideSecondfive = setInterval(hideSecondFive, 5000);

</script>

这是工作小提琴:)     http://jsfiddle.net/Dilip_naga_kumar/HVWDD/