Changing the 'display' of multiple items

[RIck Measham]

I have a dynamically generated table, filled from a database by a perl
application.

Each row represents a database record and has a 'status' and a unique 'id'.

What I want to do is create buttons to hide all rows with a particular
status. The code to show/hide is relatively easy, but how do I turn them
all off at once?

Several ideas I had:

1. Set the tr's 'id' attribute to the status (eg 'open') and then set that
id to display: none. But that only turns off the first one.

2. Do the same but somehow loop over all elements looking for that id.

3. Set the tr's 'id' attribute to the status plus the data's id (eg
'open.24') then loop over all elements matching the status with a regexp.

4. Doing something else that I haven't thought of yet.

Anyone have any advice and example code?

Cheers!
Rick

 

[Ivo]

When each row is given a "status", add its id to an array. When the button is
clicked to hide those rows, loop through the array and hide the id's contained
within.
--

ID's are unique, so giving multiple tr's the same ID confuses the browser. A
class can be shared among different tags, then changing the class style is
all that needs doing. Like so:
<tr id="myTR23" class="specialstatus">...</tr>
<tr id="myTR24" class="specialstatus">...</tr>
<tr id="myTR25" class="ordinarystatus">...</tr>

Depending on the number of tr's to hide and the overall lebngth of teh
table, it may be better performance wise to initiate an array after load. IF
only one type of status is to be hidden and the status does not change
dynamically, this will delay the page onload, but make it much more fluent
thereafter:

clssNodeArr = new Array();
function createClassNodeArr(e,v){
if(document.getElementsByTagName){
var nodes=document.getElementsByTagName(e);
var max=nodes.length;
for(var i=0;i<max;i++){
var nodeObj=nodes.item(i);
var attrMax=nodeObj.attributes.length;
for(var j=0;j<attrMax;j++){
if(nodeObj.attributes.item(j).nodeName=='class'){
if(nodeObj.attributes.item(j).nodeValue==v){
clssNodeArr[clssNodeArr.length]=nodeObj
}
}
}
}
}
}

onload="createClassNodeArr('tr','specialstatus')"

function
toggledisplay(x){if(document.getElementsByTagName){x=(x)?'normal':'none';
for(var i = 0;i < clssNodeArr.length;i++) clssNodeArr.style.display = x;
}}

Then try toggledisplay(1); and toggledisplay(0);
or similar.
HTH
Ivo.