By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,684 Members | 1,831 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,684 IT Pros & Developers. It's quick & easy.

Changing the 'display' of multiple items

P: n/a
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

--
Obviously the reply-to is a fake. Just change the 'spam-' to 'i' so that the
result sounds like why you go to an optometerist.
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
In article <3f***********************@news.optusnet.com.au> , RIck Measham
<ri***@spam-site.net.au> writes:
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: <snip>4. Doing something else that I haven't thought of yet.


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.
--
Randy
Jul 20 '05 #2

P: n/a
Ivo
"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m11.aol.com...
In article <3f***********************@news.optusnet.com.au> , RIck Measham
<ri***@spam-site.net.au> writes:
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: <snip>
4. Doing something else that I haven't thought of yet.


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[i].style.display = x;
}}

Then try toggledisplay(1); and toggledisplay(0);
or similar.
HTH
Ivo.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.