Change Table Row Colour with Checkbox onClick

CMellor · 09-26-2007, 10:49 PM

Hello,

I think this may be a really simple task, but I'm no Javascript guru, so I'm having trouble grasping it. Google also wasn't much help, but probably because couldn't describe well enough what I wanted.

Before I start, if anybody does reply and uses PrototypeJS, I also use it and a method using it would be much more preferred, but if not, normal Javascript will do.

So I have this table set up... I'm not much of a table user, but using div's for this would just be too much hassle.

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th align="left" colspan="2">Message</th>
      <th width="25%">Sender</th>
      <th width="10%">Mark</th>
    </tr>
  </thead>
  {foreach item=pmsg from=$pmno}
  <tbody>
    <tr id="tr" class="{if $pmsg.is_new eq 1}is_new{else}{cycle values="color1, color2"}{/if}">
      <td align="center" width="5%">
      {if $pmsg.is_new eq 1}
      <img src="images/new_pm_folder.png" alt="New PM" title="New PM" />
      {else}
      <img src="images/no_new_pm_folder.png" title="No new PM" alt="No new PM" />
      {/if}
      </td>
      <td><a href="ucpanel/pm/{$pmsg.pm_id}/">{$pmsg.subject}</a><div class="pm_date">{$pmsg.date|date_pretty}</div></td>
      <td align="center"><a href="user/{$pmsg.username|urlencode}/">{$pmsg.username}</a></td>
      <td align="center"><input name="pm_option[]" type="checkbox" id="pm_option" value="{$pmsg.pm_id}" /></td>
    </tr>
  </tbody>
  {/foreach}
</table>

The code between {} is from Smarty.

All I want to do, is when the checkbox is checked, I want the table row to change a different colour, and when unchecked, it will remove the colour... sounds simple huh? but I couldn't work my head around it... I mean I tried for ages and almost got it; I managed to change the colour of it, but when unchecked, it didn't remove it.

Thanks for any help.