Toggle row color when Checkbox is checked/unchecked

**gisenberg** · 12-11-2006, 11:14 AM

Hi - I have been fighting with this for a couple of days now. I have a dynamic table that is built via a query which has a checkbox at the beginning of the row. When a user clicks or checks a checkbox I need to have the row highlight to a different color and then if the user unchecks the checkbox I need to have the row go back to the original color. Below is my code at this point. I can get the row to highlight, but I cannot get the row to un-highlight when I check it again.

Thanks in advance for the help!

<script type="text/javascript"><!--

function gregtest2()
{
var message = '';
for (var i = 0; i <= 249; i++) {
testchecked = document.form.elements[i].checked;
if (testchecked == true) {
try{HighLightTR('white','cc3333');}catch(e){;}
}
if (testchecked == false) {
try{HighLightTR('gold','cc3333');}catch(e){;}
}
// document.form.price.value = ('$' + document.form.price.value);
// $price = document.form.price.value;
}
}

</script>

<script>
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(backColor,textColor){
// if(typeof(preEl)!='undefined') {
// preEl.bgColor=orgBColor;
// try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
// }
var el = event.srcElement;
el = el.parentElement;
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;

try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el;
}

function ChangeTextColor(a_obj,a_color){ ;
for (i=0;i<a_obj.cells.length;i++)
a_obj.cells(i).style.color=a_color;
}
</script>

**toicontien** · 12-11-2006, 11:31 AM

Maybe try toggling the class name of the table row?

Code:

window.onload = function() {
  if (document.getElementsByTagName) {
    var inputs = document.getElementsByTagName('input');
    for (var i=0, end=inputs.length; i < end; i++) {
      if (inputs[i].className === 'toggleCheck') {
        inputs[i].onclick = function() {
          var TRnode = this.parentNode;
          while (TRnode.nodeName !== 'TR') {
            TRnode = TRnode.parentNode;
          }
          TRnode.className = TRnode.className === 'rowA' ? 'rowB' : 'rowA';
        };
      }
    }
  }
}

This script will toggle the class name of the TR tags between rowA and rowB.

**Charles** · 12-11-2006, 11:43 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<script type="text/javascript">


</script>

<style type="text/css">
fieldset {padding:1ex; width:15em}
label {display:block; text-align:left}
label.highlight {background-color:#aaa}
input {margin-right:1em}
button {display:block; margin:auto}
</style>

<form action="some-script.pl">
<fieldset>
<legend>Example</legend>
<label><input onclick="this.parentNode.className = this.checked ? 'highlight' : ''" type="checkbox">Foo</label>
<button type="submit">Submit</button>
</fieldset>
</form>

**gisenberg** · 12-11-2006, 11:53 AM

Here is the PHP code snippet from my script. Will these solutions work with it? I am a newbie to JavaScript.

<div align="center">
<center>
<table class="tableoptions">
<tr>
<th>
Dreprecated Atribute
</th>
<th>
CSS Property-Value Pair
</th>
<th colspan="4">

</th>
</tr>
<?php

for ($i = 1; $i <= 250; $i++) {
$options = $i + 9;
$cost = $i + 259;
if ($a_row[$options] > '') {
?>
<tr bgColor="green" onClick="gregtest2()" >
<td>
<input type="checkbox" value="<?php $a_row[$options]|$a_row[$cost]; ?>" name="chkprice[]" >
</td>
<td class="options"><?php echo $a_row[$options]; ?>
</td>
<td align="right" width="60">$<?php echo $a_row[$cost]; ?>.00
</td>
<td width="20" valign="top"><input type="hidden" name="cost1" readonly=true value="<?php echo $a_row[$cost] ?>">
</td>
<?php
}
}

**gil davis** · 12-11-2006, 11:58 AM

Code:

<style type="text/css">
tr {
  color: #cc3333;
  background-color: white;
}
</style>
<script type="text/javascript">
function check(it) {
  tr = it.parentElement.parentElement;
  tr.style.backgroundColor = (it.checked) ? "gold" : "white";
}
</script>
<form onsubmit="return false">
<table border width=100%>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
</table>
</form>

**gisenberg** · 12-11-2006, 12:11 PM

Thanks....that worked!

Can you call more than one JavaScript function from an onClick?

Greg

**toicontien** · 12-11-2006, 12:26 PM

Just as another way of doing the same thing:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Highlighting rows</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">
    <!--
    /* Background color of unhighlighted row */
    .rowA td {
      background-color: green;
    }
    
    /* Background color of row when highlighted */
    .rowB td {
      background-color: gold;
    }
    -->
    </style>
    
    <script type="text/javascript">
    <!-- begin hiding
    window.onload = function() {
      if (document.getElementsByTagName) {
        var inputs = document.getElementsByTagName('input');
        for (var i=0, end=inputs.length; i < end; i++) {
          if (inputs[i].className === 'toggleCheck') {
            inputs[i].onclick = function() {
              var TRnode = this.parentNode;
              while (TRnode.nodeName !== 'TR') {
                TRnode = TRnode.parentNode;
              }
              TRnode.className = TRnode.className === 'rowA' ? 'rowB' : 'rowA';
            };
          }
        }
      }
    };
    // end hiding -->
    </script>
  </head>
  <body>
    <table class="tableoptions">
      <thead>
        <tr>
          <th colspan="2" id="th_options">Options</th>
          <th id="th_cost">Cost</th>
        </tr>
      </thead>
      <tbody>
        <?php for ($i = 1; $i <= 250; $i++):?>
        <?php
          $options = $i + 9;
          $cost = $i + 259;
        ?>
          <?php if ($a_row[$options] != ''):?>
            <tr class="rowA">
              <td>
                <input type="checkbox" class="toggleCheck" value="<?php $a_row[$options]|$a_row[$cost]; ?>" name="chkprice[]">
                <input type="hidden" name="cost1" readonly value="<?php echo $a_row[$cost] ?>">
              </td>
              <td class="options" headers="th_options">
                <?php echo $a_row[$options]; ?>
              </td>
              <td align="right" width="60" headers="th_cost">
                $<?php echo $a_row[$cost]; ?>.00
              </td>
            </tr>
          <?php endif;?>
        <?php endforeach;?>
      </tbody>
    </table>
  </body>
</html>

This method keeps you HTML a little cleaner if you create the onclick even handlers in the window's onload event. I also prettied up the PHP and fleshed out the markup for the table a little. You had some extra HTML tags you didn't need and was missing some tags that increase the accessibility of the table's data.

**toicontien** · 12-11-2006, 12:28 PM

RE: more than one function per click:

HTML Code:

<TAG onclick="func1(); func2();">

or...

Code:

document.getElementById('myTag').onclick = function() {
  func1();
  func2();
};

**ayse_incebulut** · 12-11-2006, 03:38 PM

gil davis
Your code is not working in Mozilla.
I wrote
tr = it.parentNode.parentNode;
It worked in Mozilla.

Code:

 
<style type="text/css">
tr {
  color: #cc3333;
  background-color: white;
}
</style>
<script type="text/javascript">
function check(it) {
var tr = it.parentNode.parentNode;
  tr.style.backgroundColor = (it.checked) ? "gold" : "white";
}
</script>
<form onsubmit="return false">
<table border=1 width=100%>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
<tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
</table>
</form>