Hide / Show Table Rows
Posted: Thu Apr 05, 2012 9:37 am
I have a simple script set up that hides and displays rows in a table, one at a time, every x seconds. This works quite well, but was wondering if there is a more concise way of doing it using jQuery?
what I have so far is:
what I have so far is:
Code: Select all
<body onload="hideShow2(3000)">
<div style="position:absolute; left:0%; top:50%; display:block;">
<table id="dbTable1" class="Round" style="display:block;">
<tbody>
<tr>
<th style="background-color: #CFCFCF; color: #000000;" class="RoundTop">Table 1</th>
</tr>
<tr ID="1" style="display: none; ">
<th class="RoundBottom">Row 1</th>
</tr>
<tr ID="2" style="display: block; ">
<th class="RoundBottom">Row 2</th>
</tr>
</tbody>
</table>
</div>
Code: Select all
//HIDE ALL THE ROWS
function hideRows()
{
var a = document.getElementById("dbTable1");
var len = a.rows.length;
for(i=1 ; i< len; i++)
{
a.rows[i].style.display = 'none';
}
}
//SHOW THE ROWS
var a = 1;
function showRows()
{
var e = document.getElementById("dbTable1");
var len = e.rows.length;
e.rows[a].style.display = 'block';
a=a+1;
if(a==len)
{
a=1;
}
}
//TIMER
function hideShow()
{
hideRows();
showRows();
}
//TIMER2
function hideShow2()
{
setInterval('hideShow()',3000);
}