On May 17, 2013, at 12:19 PM, Phil Petree wrote:
> I'm expanding the table row highlighting ya'll helped me with before. Now I
> have two tables on a page and each table has rows that I want to highlight on
> mouseover.
>
> Can't give the tables the same id so what I was doing was creating a div with
> a class:
>
> <table class='blah' id='blah' ...>
> <tr><th>Col 1</th><th> col 2</th></tr>
> <div class='row_highlight'>
> <tr><td>Data 1</td><td>Data 2</td</tr>
> <tr><td>Data 1</td><td>Data 2</td</tr>
> <tr><td>Data 1</td><td>Data 2</td</tr>
> </div>
> </table>
>
> In prototype I'm trying:
> $$('div.row_highlight tr').each(function(item) {
> item.observe('mouseover', function() {
> item.addClassName('over');
> });
> item.observe('mouseout', function() {
> item.removeClassName('over');
> });
> });
> $$ is returning null... not even getting to the item.observe
>
> Obviously, I'm doing something wrong here... googled around and most people
> seem to be doing it the way I am... what am I missing?
You can't nest a div inside a table like this. JavaScript (not just Prototype)
has no tolerance for malformed HTML. Browsers handle it perfectly (for certain
definitions of perfectly) but scripts rely on you getting the HTML right before
you start horsing around with the DOM.
The simplest way to do what you're describing here is to make your HTML valid,
and add a new set of valid tags that you're not currently using: thead and
tbody.
<table class="row_highlight">
<thead>
<tr>
<th>Head one</th><th>Head two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col one</td><td>Col two</td>
</tr>
... many more rows here ...
</tbody>
</table>
Now, all you need to get the table rows to highlight is this:
$$('.row_highlight tbody tr').each(function(item){
... your code here ...
});
See how that works?
Walter
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to prototype-scriptaculous+unsubscr...@googlegroups.com.
> To post to this group, send email to prototype-scriptaculous@googlegroups.com.
> Visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to prototype-scriptaculous+unsubscr...@googlegroups.com.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
Visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
