/    Sign up×
Community /Pin to ProfileBookmark

Toggle row color when Checkbox is checked/unchecked

Copy linkTweet thisAlerts:
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[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>

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienDec 11.2006 — Maybe try toggling the class name of the table row?
<i>
</i>window.onload = function() {
if (document.getElementsByTagName) {
var inputs = document.getElementsByTagName('input');
for (var i=0, end=inputs.length; i &lt; 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.
Copy linkTweet thisAlerts:
@CharlesDec 11.2006 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta name="Content-Script-Type" content="text/javascript"&gt;
&lt;title&gt;Example&lt;/title&gt;

&lt;script type="text/javascript"&gt;


&lt;/script&gt;

&lt;style type="text/css"&gt;
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}
&lt;/style&gt;

&lt;form action="some-script.pl"&gt;
&lt;fieldset&gt;
&lt;legend&gt;Example&lt;/legend&gt;
&lt;label&gt;&lt;input onclick="this.parentNode.className = this.checked ? 'highlight' : ''" type="checkbox"&gt;Foo&lt;/label&gt;
&lt;button type="submit"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
Copy linkTweet thisAlerts:
@gisenbergauthorDec 11.2006 — 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

}

}
Copy linkTweet thisAlerts:
@gil_davisDec 11.2006 — &lt;style type="text/css"&gt;
tr {
color: #cc3333;
background-color: white;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function check(it) {
tr = it.parentElement.parentElement;
tr.style.backgroundColor = (it.checked) ? "gold" : "white";
}
&lt;/script&gt;
&lt;form onsubmit="return false"&gt;
&lt;table border width=100%&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
Copy linkTweet thisAlerts:
@gisenbergauthorDec 11.2006 — Thanks....that worked!

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

Greg
Copy linkTweet thisAlerts:
@toicontienDec 11.2006 — Just as another way of doing the same thing:
[code=html]
<!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>
[/code]
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.
Copy linkTweet thisAlerts:
@toicontienDec 11.2006 — RE: more than one function per click:

[code=html]
<TAG onclick="func1(); func2();">
[/code]
or...

<i>
</i>document.getElementById('myTag').onclick = function() {
func1();
func2();
};
Copy linkTweet thisAlerts:
@ayse_incebulutDec 11.2006 — gil davis

Your code is not working in Mozilla.

I wrote

tr = it.parentNode.parentNode;

It worked in Mozilla.

&lt;style type="text/css"&gt;
tr {
color: #cc3333;
background-color: white;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function check(it) {
var tr = it.parentNode.parentNode;
tr.style.backgroundColor = (it.checked) ? "gold" : "white";
}
&lt;/script&gt;
&lt;form onsubmit="return false"&gt;
&lt;table border=1 width=100%&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox" onclick="check(this)"&gt;&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;td&gt;testing!&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
Copy linkTweet thisAlerts:
@WstoddardFeb 21.2007 — Good job Gil !

Just found this via a search.
Copy linkTweet thisAlerts:
@LeeUFeb 21.2007 — @ gil and ayse_incebulut

Mind if I post that over on JavaScript Source? I would give you guys the credit and link to here.
Copy linkTweet thisAlerts:
@gil_davisFeb 22.2007 — @ gil and ayse_incebulut

Mind if I post that over on JavaScript Source? I would give you guys the credit and link to here.[/QUOTE]That is fine with me.
Copy linkTweet thisAlerts:
@ayse_incebulutFeb 22.2007 — LeeU

Yes you can do that.

"Created by ..."

will be

"Written by ..."
×

Success!

Help @gisenberg spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...