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.

Wildhoney · 09-27-2007, 12:52 AM

Try this. Just set the onclick() action on the checkboxes to call change_row_colour(this). Like so:

Code:

onclick="change_row_colour(this)"

Here's the main part though:

javascript Code:

<script type="text/javascript">

    var szColorTo = '#0000FF';
    var szColorOriginal = '#FF0000';
    
    function change_row_colour(pTarget)
    {
        var pTR = pTarget.parentNode.parentNode;
        
        if(pTR.nodeName.toLowerCase() != 'tr')
        {
            return;
        }
        
        if(pTarget.checked == true)
        {
            pTR.style.backgroundColor = szColorTo;
        }
        else
        {
            pTR.style.backgroundColor = szColorOriginal;
        }
    }

</script>

CMellor · 09-27-2007, 01:42 AM

Cheers Wild Honey, I'll give it a shot and come back with a response.

Wildhoney · 09-27-2007, 03:06 PM

Any luck with that, laddo?

CMellor · 09-27-2007, 04:37 PM

Aye, much luck!

Thanks ya very muchly!

Wish I knew what half of it meant, lol. What's parentNode and nodeName?

Wildhoney · 09-27-2007, 05:47 PM

Hehe. It's DOM so parentNode would be the node above it. So if you have:

Code:

<table>
	<tr>
		<td>Element</td>
	</tr>
</table>

The TD's parent node is the TR, and the parent of the TR is the table node. nodeName is simply its name, TR's node name is TR. Simple as that.

CMellor · 10-03-2007, 09:39 PM

I've just realised that this doesn't work in Internet Explorer... what's new eh?

I did a slight modification than the code Wildhoney provided:

Code:

<script type="text/javascript">
  var bgColor = '#CCCCCC';
  var bgColorOrig = '#F3F3F3';
  {literal}
  // Change table row on checkbox click
  function colorRow(pTarget) {
    var pTR = pTarget.parentNode.parentNode;
    				
    if(pTarget.checked == true) {
      pTR.setStyle({backgroundColor: bgColor});
      $('delete_pm').enable();
    }
    else {
      pTR.setStyle({backgroundColor: bgColorOrig});
        $('delete_pm').disable();
    }
  }
{/literal}
</script>

Basically just uses Prototype functions instead of normal Javascript. In IE, when I click the checkbox, the colour doesn't change and the submit button stays disabled.

I hate IE sometimes...

allworknoplay · 04-21-2009, 10:34 PM

I have a question about this part:

Code:

 
var pTR = pTarget.parentNode.parentNode;
        
if(pTR.nodeName.toLowerCase() != 'tr')

You're creating the variable "pTR" and setting it to:

pTarget.parentNode.parentNode

Then using it later in the next line. Are you doing this just to
shorten it so it wouldn't be so long like this?

Code:

if(pTarget.parentNode.parentNode.nodeName.toLowerCase() != 'tr')

Also, how come you're using the toLowerCase() function?

allworknoplay · 04-21-2009, 10:37 PM

I changed the code a little bit, but it doesn't work for me?

Code:

<script type="text/javascript">
	var color_on = '#EEEEEE';
	var color_off = '#FFFFFF';
	
	function row_color(pTarget)
    {
        var pTR = pTarget.parentNode.parentNode;
        
        if(pTR.nodeName.toLowerCase() != 'tr')
        {
            return;
        }
        
        if(pTarget.checked == true)
        {
            pTR.style.backgroundColor = color_on;
        }
        else
        {
            pTR.style.backgroundColor = color_off;
        }
    }
	
	
	
</script>

Code:

<table width="796" border="1" cellspacing="5" cellpadding="2">
  <tr>
    <td width="50"><label>
      <div align="center">
        <input type="checkbox" onclick="row_color(this)" id="checkbox" name="checkbox"  />
        </div>
    </label></td>
    <td width="717">whatever01</td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" onclick="row_color(this)" id="checkbox" name="checkbox"  />
    </div></td>
    <td>whatever02</td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" onclick="row_color(this)" id="checkbox" name="checkbox"  />
    </div></td>
    <td>whatever03</td>
  </tr>
</table>

Salathe · 04-21-2009, 11:49 PM

For your latest code, the pTR variable isn't pointing to the table row, but to the label (first row) or td (other rows). It goes up two levels in the DOM tree, your HTML code needs it to traverse back four/three levels to reach the table row.

Quote:

how come you're using the toLowerCase()

It's just to make a consistently cased node name across the various browsers.

allworknoplay · 04-22-2009, 12:25 AM

Quote:

Originally Posted by Salathe

For your latest code, the pTR variable isn't pointing to the table row, but to the label (first row) or td (other rows). It goes up two levels in the DOM tree, your HTML code needs it to traverse back four/three levels to reach the table row.

It's just to make a consistently cased node name across the various browsers.

Thanks Salathe,

Once I removed the label and the div's, it worked.