Walter, I tried your method of applying the class to the td's and your code was throwing an error which is most likely my fault. <g>
It's saying that "object doesn't support that method" on the elm.addClassName('over'); PROTOTYPE: var rows = $$('#mail tr'); $('mail').on('mouseover', 'tr', function(elm, evt){ rows.invoke('removeClassName', 'over'); elm.addClassName('over'); }); CSS: #mail tr.over td { background-color: lightgreen; } HTML: <table class='form' id='mail'> <tr> <th align='left'>Subject:</th> <th align='left'>From:</th> <th align='left'>Sent:</th> <th>Action</th> </tr> <tr id='$id'> <td>$subject</td> <td>$username</td> <td>$sentdate</td> <td valign='middle' align='center'> <img src='/images/icons/delete.png' width='16' height='16' onclick='deleteMsg(this, $id);'> <img src='/images/icons/reply.png' width='16' height='16' onclick='replyMsg(this, $id);'> <img src='/images/icons/forward.png' width='16' height='16' onclick='forwardMsg(this, $id);'> </td> </tr> On Wed, Jan 2, 2013 at 12:10 AM, Walter Lee Davis <wa...@wdstudio.com>wrote: > I usually have to add the color attribute to the td rather than the tr. > You can make this change at the CSS level. Rather than using setStyle(), > toggle the classname of the row, and then set your CSS to apply to td > children of that class of row. For example: > > var rows = $$('#mytable tr'); > $('mytable').on('mouseover', 'tr', function(elm, evt){ > rows.invoke('removeClassName', 'over'); > elm.addClassName('over'); > } > > CSS: > #mytable tr.over td { > background-color: #fefefe; > } > > Walter > > On Jan 1, 2013, at 11:55 PM, Dave Kibble wrote: > > > I think there's also something weird about CSS applied to table rows, > > (I think) cells don't inherit all properties from the row they > > 'belong' to. Make sure your HTML/CSS works in a stand-alone document > > first to check. > > > > Dave > > > > On 1 January 2013 22:53, Phil Petree <phil.pet...@gmail.com> wrote: > >> I have an empty <div> that gets an ajax result that contains a table > which > >> looks like this: > >> > >> HTML: > >> <table class='form' id='mail' width='100%' border='1'> > >> <tr> > >> <th>Subject:</th> > >> <th>From:</th> > >> <th>Sent:</th> > >> <th>Action</th> > >> </tr> > >> <tr class='mailrow' onclick='viewMsg(" .$id .",\"" .$subject ."\");' > > >> <td>$subject</td> > >> <td>$username</td> > >> <td>$sentdate</td> > >> <td valign='middle' align='center'> > >> <img src='/images/icons/delete.png' width='16' height='16' > >> onclick='deleteMsg(this, $id);'> > >> <img src='/images/icons/reply.png' width='16' height='16' > >> onclick='replyMsg(this, $id, \"{$subject}\" );'> > >> <img src='/images/icons/forward.png' width='16' height='16' > >> onclick='forwardMsg(this, $id, \"{$subject}\" );'> > >> </td> > >> </tr> > >> </table> > >> > >> In the onComplete: I am calling this code to try and cause the rows to > >> highlight during the mouseover... I'm getting nothing. My first > thought is > >> that the table hasn't been rendered when onComplete is called but then, > >> onComplete should be called after all other work is done. What's the > >> solution to this? > >> > >> Prototype: > >> $$('tr.mailrow').each(function(item) { > >> item.observe('mouseover', function() { > >> item.setStyle({ backgroundColor: '#303030' }); > >> }); > >> item.observe('mouseout', function() { > >> item.setStyle({backgroundColor: '#fff' }); > >> }); > >> }); > >> > >> CSS: > >> .mailrow tr:hover { color: #303030; } > >> > >> > >> > >> -- > >> 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. > > > > -- > > 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. > > > > -- > 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. > > -- 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.