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.

Reply via email to