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

[ben morrison]

> 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?
>
> After than I imagine it's just a matter of looping over them and change the
> class.

Give the table and id so you can easily access it. Loop through all
the table rows within that id and find each element with a class of
foo, attach a click event to add an extra class or remove it.

// Javascript

var myTable = document.getElementById('myTableId');
	var myTrs = myTable.getElementsByTagName('tr');
		for(i=0;i<=myTrs.length;i++) {
			if(myTrs[i].className=='foo') {
				myTrs[i].onClick=function() { showHide(this)};
			}
		}
		
	showHide(fooTr) {
		if (fooTr.className=="foo") {
				id.className+=" showMe";
				} else {
				id.className+="foo";
				}
	 }


/* styles */

tr.hideMe {
display:none;
}
tr.foo {
display:block;
}

Im sure there are better ways, but im very new to JS, a better class
test for starters.

hope that sets you off in the right direction

ben