PDA

View Full Version : How to hide multiple rows of a table at once?



code_me
Apr 23rd, 2010, 08:40 AM
Hi,
I am working on a web page that includes a table with 3 primary visible rows, on clicking the info on the row 1, a hidden row or lets consider as row 1a below first row shows up(i have used hidetr fuction to hide the row) with some more details further when i click on some of the details of row 1a, another row lets say row 1b with some more info and iframes shows up.

Similarly for row 2 there are hidden rows 2a and 2b that show up when i click on respective reference links and same for row 3.

I can hide these hidden rows back after accessing info by clicking on the same link that i had used for displaying them.

But i want another commodity by clicking on which i can i hide all these rows at once, that is, i want to hide these rows 1a, 1b, 2a, 2b, 3a and 3b at once.

Any suggestions.

Thanks

mbaker
Apr 23rd, 2010, 10:01 AM
i have used hidetr fuction to hide the row[s] ...

I can hide these hidden rows back after accessing info by clicking on the same link that i had used for displaying them.

... i want to hide ... rows 1a, 1b, 2a, 2b, 3a and 3b at once.

I'm unfamiliar with the hidetr function. The source code for it, or a URL where it can be found would help.

Assuming that hidetr is a javascript function, all you need, in principal, is a function that knows of, or can find, all of your hidden rows, and resets their state, and any variables representing their state, to hidden.

Or to state that in a less dense fashion:

You need a function that:

knows all of your hidden rows, or can find all of your hidden rows;
resets their state to hidden; and
resets any variables representing their state to hidden

code_me
Apr 23rd, 2010, 10:40 AM
Thank you mbaker for your concern, actually the hidetr is a function that i created(to hide and display table rows) sry i dint mention that.

But i have created a function that meets my requirement i am posting it here too>>

function showRow()
{
var oRows = document.getElementById('myTable').getElementsByTagName('tr');
var iRowCount = oRows.length;
var i=0;

for(i=0;i<iRowCount;i++)
{
var index=document.getElementById('myTable').rows[i].rowIndex;
if(index==0||index==1||index==5||index==9)
{
document.getElementById('myTable').rows[i].style.display='';
}
else
{
if(document.getElementById('myTable').rows[i].style.display=='none')
{
document.getElementById('myTable').rows[i].style.display='none';
}
else
{
document.getElementById('myTable').rows[i].style.display='none';
}
}
}
}

now i am feeling that its too simple!! lol.. well am new to this software feild so starting up things..

Thanks again

mbaker
Apr 23rd, 2010, 02:16 PM
Your code could be simplified further to:


function showRow()
{
var oRows = document.getElementById('myTable').getElementsByTagName('tr');
var iRowCount = oRows.length;
var i=0;

for(i=0;i<iRowCount;i++)
{
var index=document.getElementById('myTable').rows[i].rowIndex;
if(index==0||index==1||index==5||index==9)
{
document.getElementById('myTable').rows[i].style.display='';
}
else
{
document.getElementById('myTable').rows[i].style.display='none';
}
}
}

You had a redundant if test with both if and else statements being the same.

code_me
Apr 26th, 2010, 08:01 AM
Thanx mbaker.. works just fine..