Page 1 of 1

Hide / Show Table Rows

Posted: Thu Apr 05, 2012 9:37 am
by IGGt
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:

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);	
  }

Re: Hide / Show Table Rows

Posted: Thu Apr 05, 2012 11:06 am
by pickle

Code: Select all

function hideRows()
{
    $("#dbTable1 tr").css('display','none');
}
function showRows()
{
    $("#dbTable1 tr").css('display','block');
}
Concise enough ;)

Re: Hide / Show Table Rows

Posted: Thu Apr 05, 2012 11:26 am
by IGGt
It's certainly concise..

but I think maybe I have misunderstood, as it doesn't seem to work.

I have replaced:

Code: Select all

function hideRows()
  {
    var a = document.getElementById("dbTable1");
    var len = a.rows.length;
    for(i=1 ; i< len; i++)
    {
      a.rows[i].style.display = 'none';
    }
  }
with

Code: Select all

function hideRows()
{
    $("#dbTable1 tr").css('display','none');
}
and the same for the showRows function.

All that happens now though, is that after the 3 seconds, both rows are shown, whereas it should be just one at a time row, then the other, and so on.

Re: Hide / Show Table Rows

Posted: Thu Apr 05, 2012 11:37 am
by pickle
The hideRows() function behaves exactly the same. My showRows() function does not - I got a little hasty.

Code: Select all

var a = 1,
    $rows = $("#dbTable1 tr");

function showRows()
{
    $rows.eq(a).css('display','block');
 
    a = (a == $rows.length-1) ? 1 : a + 1;
}

Re: Hide / Show Table Rows

Posted: Wed Apr 11, 2012 8:57 am
by IGGt
I can see the logic of what you have put there, but something doesn't seem right.

I tried to print the values of 'a' as it looped through, and was expecting to get 1, then 2, then 1, then 2 etc. but instead I got 1,2,3,4,5.....

I also tried to print the value of $rows.length, expecting to get 2, instead I am getting 0.

Re: Hide / Show Table Rows

Posted: Wed Apr 11, 2012 9:41 am
by pickle
Maybe I misunderstood what you showRows() function does - I thought "a" was supposed to loop from zero to the number of rows.

As for why $rows.length is 0, maybe the selector is wrong?

Re: Hide / Show Table Rows

Posted: Wed Apr 11, 2012 9:55 am
by IGGt
I have fixed it, I think:

Code: Select all


var a = 1;

function showRows()
	{
		var $rows1 = $('#dbTable1 tr');  //Get Number of <tr>
				
		$rows1.css('display','none');  //Hide All Rows
				
		$rows1.eq(0).css('display','block'); //Display Header
		$rows1.eq(a).css('display','block'); //Show Row
    	       a = (a == $rows1.length-1) ? 1 : a + 1; //get next row / reset back to first row
        }