Aha. Well, $('tr') returns one element that has the ID of 'tr', it
does not return a collection of elements with that tag name.
$$('tr') will return a collection of extended elements with the tag
name TR. If you want to be more specific (maybe you use tables for
something else on the same page, or do one day) then you can reference
a parent element and use select to get the rows:
$('tableID').select('tr')
This has the added benefit of being slightly faster, since it doesn't
look everywhere for table rows, just in that one table (or parent DIV
or whatever).
To apply the same action to multiple objects, Prototype has the
Enumerable class, and the marvelous invoke method defined therein. So
to set up the elements in your collection to listen for a click (and
this is a weak design, look into event delegation for the right way to
do it) you would do this:
$('tableID').select('tr').invoke('observe','click','morph','checked');
You can't use removeClassName to "undo" what Morph has wrought here. I
believe that when you use a classname in Morph, it simply converts the
properties of that particular CSS rule into the ending style hash and
then calculates the intermediate values inside its effect loop.
What will work is to use setStyle and a style hash with all the
original values. So let's imagine that a normal tr looks like this:
{backgroundColor:'#fff'} and tr.checked looks like {backgroundColor:
'#ffc'} To set everything back to normal, do this:
$('tableID').select('tr').invoke('setStyle',{backgroundColor:'#fff'});
If you wanted to wrap both resetting and observing the click in a
single function, you could simply invoke that:
var clicky = function(elm){
elm.setStyle({backgroundColor:'#fff'});
elm.observe('click',function(evt){
evt.element().morph('checked');
});
}
$('tableID').select('tr').invoke(clicky);
Walter
On Jun 4, 2009, at 4:02 PM, Celso wrote:
> My app uses "zebra" table. Each "tr" have a checkbox, when the
> checkbox is checked, the morph effect is enabled
>
> css:
> .checked {font-weight: bold; background:#fb5126; color:#fff;}
>
> zebra:
>
> <tr id="tr-577" class="">
> </tr>
> <tr id="tr-587" class="fundo">
> </tr>
> <tr id="tr-592" class="">
>
>
> with a checked:
>
> <tr id="tr-577" class="">
> </tr>
> <tr id="tr-587" class="fundo checked">
> </tr>
> <tr id="tr-592" class="">
>
> To ensure the original color of the zebra, i remove the "checked"
> class
>
> $('tr').morph('checked') function to add effect, but.. and the
> remove???
>
> I just know:
>
> $('tr').removeClassName('checked');
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
