[thelist] DOM: Getting elements with class="foo"? Solution & TIP!
Frank
lists at frankmarion.com
Fri Nov 25 09:15:52 CST 2005
At 01:11 PM 2005-11-23, you wrote:
>Using this custom function, you can target the class name.
>http://www.dustindiaz.com/basement/getElementsByClass.html
Just thought I would follow up with a complete solution.
<tip type="Javascript/DOM: Toggle table row visibility" author="Frank Marion">
The intent is to toggle visibility of selected rows in a table based on
some event, such as clicking a link. In my case it's to show and hide form
elements. The rows are identified by a class. Here's what it looks like:
<tr class="addr_new_show_hide" style="display:none;">
<th>A label</th>
<td><input></td>
</tr>
Note that it has style="display:none;" as the default. The class name is
used as an identifyer.
The next step is to get the rows that are identified with a class. I didn't
want to give each row and ID, because it would have been less generic, and
what I was indeed doing is toggling a class of rows, so it seemed appropriate.
Brian Cummiskey pointed me to this excellent bit of code that I've lightly
modified:
// Retrieve a specific element by it's class
function getElementsByClass(node,searchClass,tag) {
var classElements = new Array();
var els = node.getElementsByTagName(tag); // use "*" for all elements
var elsLen = els.length;
var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
Now, we use a function to loop over the results returned by the above function.
// Loop over each element, toggle it's display attribute
function toggleDisplay(className) {
var el = getElementsByClass(document,className,'*');
for (i = 0; i != el.length; i++) {
if (el[i].style.display== 'none') {
if (document.all) {
el[i].style.display = 'block';
} else {
el[i].style.display = 'table-row';
}
} else {
el[i].style.display = 'none';
}
}
Note that in order to ensure browser compatibility we've had to ensure that
I've used "document.all" to test for IE,;and that we displayed the row as
block. "block" doesn't work in FireFox, so we reset it to "table-row". Now
it works well.
And finally, here's the link with our event to set it in motion:
<a href="#request.this_page#" onclick="return
toggleDisplay(addr_new_show_hide);">add a new shipping address</a>
A note:
[1] Remember that when an element has display:none; that any form element
within it will NOT be submitted.
[2] I have NOT tested this on NS4, and would be quite surprised if it
worked at all.
I will at some point post this and a working demo at frankmarion.com
Thanks for your able assistance, fellow listers!
</tip>
Frank Marion lists at frankmarion.com Keep the signal high.
More information about the thelist
mailing list