Walter, thanks for that... I knew I was approaching it the wrong way... I
never think about tbody cause it didn't exist when I learned html... it's
never bcome a part of my habit (along with several other things) LOL
On Fri, May 17, 2013 at 12:43 PM, Walter Lee Davis <wa...@wdstudio.com>wrote:
>
> 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.
>
>
>
--
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.
