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.
