javascript - テーブルエントリの一部を表示/非表示

Question

10行のhtmlテーブルがあります。テーブルの最初の5行を5秒間表示し、次の5行をさらに5秒間表示したいと思います。行の1つのセットが表示されているときは、他のセットを非表示にする必要があります。

親切に助けて

ありがとうございます。それでは、お元気で、

abk

Answer 1

最初の 5 行と最後の 5 行を連続的に循環させる大まかな方法​​を次に示します。

$(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/

Answer 2

テーブルを 2 つの部分 (div) に分割し、setTimeout() と JQuery の toggle() を使用して部分を切り替える必要があります。試してみます！

Answer 3

さて、あなたの要件を理解しているので、これをコーディングしました。これがあなたが望むものであるかどうかを確認してください。

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