[thelist] DOM: Getting elements with class="foo"? Solution & TIP!

[Frank]

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.