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 <[email protected]>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 [email protected]. > > To post to this group, send email to > [email protected]. > > 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 [email protected]. > To post to this group, send email to > [email protected]. > 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
