Toggle row color when Checkbox is checked/unchecked

gisenberg · Dec 11, 2006

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.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>

kaht · Dec 11, 2006

Here's an example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function setRowColor(obj) {
   //get access to the row
   var theRow = obj.parentNode.parentNode;
   theRow.className = (obj.checked) ? "yellowRow" : "";
}

</script>

<style type="text/css">

tr.yellowRow {
   background-color:#ffff00;
}

</style>
</head>
<body>
<table border="1">
   <tr>
      <td>
         <input type="checkbox" onclick="setRowColor(this)" />
      </td>
      <td>test</td>
      <td>row</td>
      <td>one</td>
   </tr>
   <tr>
      <td>
         <input type="checkbox" onclick="setRowColor(this)" />
      </td>
      <td>test</td>
      <td>row</td>
      <td>two</td>
   </tr>
</body>
</html>

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

gisenberg · Dec 11, 2006

Would your solution work with my code below? I am new to JavaScript, but I sure am getting a good dose of it. ;-)

Partial code:

<div align="center">
<center>
<table class="tableoptions">
<?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
}
}

kaht · Dec 11, 2006

My code will work with your code, yes. However, I don't know PHP. My example I posted is pretty simple. Copy/Paste it into a new html file and play around with it for a few minutes, then when you understand what it's doing you can incorporate it into your code.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Toggle row color when Checkbox is checked/unchecked

gisenberg

Programmer

kaht

Programmer

gisenberg

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor