[thelist] DOM: Getting elements with class="foo"?

Brian Cummiskey Brian at hondaswap.com
Wed Nov 23 12:11:54 CST 2005


Frank wrote:
> I've got a table with certain rows that have a class that point to 
> display:none; I want to toggle visiblility with a link. Some rows have the 
> class, others, none. How do I go about accessing the rows based on having 
> the class name?

First, you need to access the class.

Using this custom function, you can target the class name. 
http://www.dustindiaz.com/basement/getElementsByClass.html

and instead of his showfoo() counter funtion, try something like this:

function showFoo() {
	var el = getElementsByClass(document,'foo','*');
	
	if(el.foo.style == display:none)
	{
		el.foo.style = display:inline;
	}
	else
		el.foo.style = display:none;
		
}


> After than I imagine it's just a matter of looping over them and change the 
> class.

as long as they all have the same class, you shouldn't have to loop. 
the getElementsByClass function should grab everything with class="foo" 
on the attribute.


The limitation i can see with this, is that the td is a child elment of 
tr.  and thus, you may need to not only toggle the td's, but also the 
container tr that holds the desired row.

HTH




More information about the thelist mailing list