0

I have a html table with 10 rows. I want to display first 5 rows of the table for 5 seconds and the next 5 rows for another 5 seconds. When one set of rows are being displayed the other set should be hidden.

Kindly help

Thanks & Regards,

abk

abk07
  • 49
  • 1
  • 8

3 Answers3

2

Here's a rough and ready way to continuously cycle between the first and last five rows:

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

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
1

You need to break your table into two parts (divs) an then use setTimeout() and JQuery's toggle() to switch the parts. Give it a shot!

koninos
  • 4,969
  • 5
  • 28
  • 47
0

Okay, as per my understanding of your requirement, I have coded this. Please check is this what you want.!

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

here is the working fiddle :) http://jsfiddle.net/Dilip_naga_kumar/HVWDD/

user1954395
  • 112
  • 8
  • Why are you using `setInterval()` if you're going to call `clearInterval()` the first time the function runs? Just use `setTimeout()`... (But if you feel you _must_ use `setInterval()` for some reason, why not name those variables `hideFirstFiveID` or something - it's confusing giving the variables exactly the same names as the functions except for the case of one letter.) – nnnnnn Jan 28 '13 at 07:20
  • yes the variable names might be quite confusing, we can have the difference between the function and varible names by just placing a string before the names for example "var_" for variable names, and we can do it with setTimeout also, that is one way of doing. Hopefully that is the better one :). Thanks for suggesting :). abk07 Please try to use setTimeout instead of setInterval and make sure you removed clearInterval in case setTimeout is used. – user1954395 Jan 28 '13 at 07:45