[RESOLVED] Change row color when checkbox ticked

**drennan** · 07-15-2008 07:35 AM

Hi. I need to do this so the selected rows within a table are clearly highlighted. The table is 15 cells wide and the checkboxes are in column 4. columns 1 and 15 act as the table border. Is there a way to change the color of all cells in that row, apart from 1 and 15, then revert colors when unchecked? Thanks guys

**Fang** · 07-15-2008 08:56 AM

Give the cells that are not to be changed a class:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>toggle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode.parentNode; // this may change depending on the html used
tr.style.backgroundColor=(obj.checked)? 'pink' : 'white';
}
</script>

<style type="text/css">
.nochange, tr {background-color:white;} 
</style>

</head>
<body>
<table border="1" cellspacing="2" cellpadding="5" summary="">
<tr>
<td class="nochange">foo</td>
<td>bar</td>
<td><label>select: <input type="checkbox" name="toggle" onclick="change(this);"></label></td>
</tr>
</table>
</body>
</html>

**drennan** · 07-15-2008 09:59 AM

thats excellent, thank you. I changed 'white' to #B1AAD7 to match my design but my row colors alternate. Is there a way of making rows 1,3,5,7 like this and 2,4,6,8 revert back to a different color when unchecked? Thanks again

**Fang** · 07-15-2008 10:21 AM

Add the class to the cells you don't want to change.

**drennan** · 07-15-2008 11:02 AM

I still want them to change but revert back to a different color than 1,3,5. This is a stripped back version of my form.

http://members.lycos.co.uk/drennanuk/form_test.html

The first line is working great and I can apply this to lines 3 & 5, but how do I get lines 2,4,6 to do the same with a different BG color? Appreciate your time.

**drennan** · 07-15-2008 11:15 AM

I just noticed that the lines i've applied this to stop adding up in the totals fields. How can I make A) work as B) does? Thanks

A) <td><label><input type="checkbox" name="toggle" value="0.80" id="bread_brown7" onclick="change(this);"></label></td>

B) <td bgcolor="#D2CAEB"><input name="bread_brown2" type="checkbox" onclick="clickCh()" value="0.80" id="bread_brown7"></td>

**Fang** · 07-15-2008 11:21 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>toggle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode.parentNode; // this may change depending on the html used
if(obj.checked) {tr.className+=' pink';}
else {tr.className=tr.className.replace(' pink', '');}


}
</script>

<style type="text/css">
.nochange, tr {background-color:white;}
tr.pink  {background-color:pink;} /* Specificity is important */
.light {background-color:#ccccff}
.dark {background-color:#cc99ff}
</style>

</head>
<body>
<table border="1" cellspacing="2" cellpadding="5" summary="">
<tr class="light">
<td class="nochange">foo</td>
<td>bar</td>
<td><label>select: <input type="checkbox" name="toggle" onclick="change(this);"></label></td>
</tr>
<tr class="dark">
<td class="nochange">foo</td>
<td>bar</td>
<td><label>select: <input type="checkbox" name="toggle" onclick="change(this);"></label></td>
</tr>
</table>
</body>
</html>

**drennan** · 07-15-2008 11:49 AM

Perfect. I'm almost there! Now I just need to get the lines totaling up properly. It works on all lines except the ones i've just changed. Can you see what's stopping it from working?

**Fang** · 07-15-2008 01:05 PM

The first row:

Code:

<td><label><input name="toggle" onclick="change(this);" type="checkbox"></label></td>

The rest:

Code:

<td bgcolor="#d2caeb"><input name="bread_brown2" onclick="clickCh()" value="0.80" id="bread_brown7" type="checkbox"></td>

**drennan** · 07-15-2008 02:59 PM

Hmmm. The totals still dont work

**Fang** · 07-16-2008 12:35 AM

Document has been removed

**drennan** · 07-16-2008 10:01 AM

I made some quick changes yesterday then had to go out. The doc is at www.fluxcreative.co.uk/second.html. The totals now work on lines 2-6 and line 1 is changing color properly. I just need to get both things working on the same line! Thx

**Fang** · 07-16-2008 10:59 AM

Look through it, see all the changes

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>products</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode; // this may change depending on the html used
if(obj.checked) {
    tr.className+=' pink';
    }
else {
    tr.className=tr.className.replace(' pink', '');
    }
clickCh();
}

function clickCh(){
var tr=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
var total1=total2=total3=total4=total5=total6=total7=total8=0;
for(var i=0; i<tr.length; i++) {
    if(tr[i].getElementsByTagName('input')[0].checked) {
        var td=tr[i].getElementsByTagName('td');
        total1+=parseFloat(td[5].firstChild.data.replace(/^[^\w\d\s\.\,]*/,""));
        total2+=parseInt(td[6].firstChild.data);
		total3+=parseInt(td[7].firstChild.data);
		total4+=parseInt(td[8].firstChild.data);
		total5+=parseInt(td[9].firstChild.data);
		total6+=parseInt(td[10].firstChild.data);
		total7+=parseInt(td[11].firstChild.data);
		total8+=parseInt(td[12].firstChild.data);
	
        }
    }
document.getElementById('total1').value="\u00A3"+total1.toFixed(2);
document.getElementById('total2').value=total2;
document.getElementById('total3').value=total3+"g";
document.getElementById('total4').value=total4+"g";
document.getElementById('total5').value=total5+"g";
document.getElementById('total6').value=total6+"g";
document.getElementById('total7').value=total7+"g";
document.getElementById('total8').value=total8+"g";
}
</script>

<style type="text/css">
table
{ 
margin-left: auto;
margin-right: auto;
}
.nochange, tr {background-color:white;}
tr.pink  {background-color:#FF00FF;}
.light {background-color:#D2CAEB;}
.dark {background-color:#B1AAD7;}

tr.rowborder td { border-top:thin solid #000;}
table {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	border-collapse: collapse;
	border-spacing: 0;
	border-top-color: #9000FF;
	border-right-color: #9000FF;
	border-bottom-color: #9000FF;
	border-left-color: #9000FF;
}
tbody td, tfoot input {
	text-align:center;
	font-style: normal;
	table-layout: auto;
}
.leftAlign {
	text-align:left;
}
.style2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	width: 20px;
	height: 20px;
	margin: 0;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0;
}
body {
	background-color: #000000;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; width: 20px; height: 20px; margin: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0; font-weight: bold; }
#apDiv1 {
	position:absolute;
	left:331px;
	top:171px;
	width:566px;
	height:6px;
	z-index:1;
}
</style>
</head>
<body>
<form action="#">
  <p>&nbsp;</p>

  <p>&nbsp;</p>
  <table width="612" border="0" cellpadding="0" cellspacing="0" bgcolor="#B4A7D4">
<thead>
    <tr style="background-color:#9000FF">
    <th width="27" scope="row">&nbsp;</th>
      <th height="20" colspan="3" style="border:1px solid #7C9171;" class="leftAlign" scope="row">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;  Product</th>
      <th width="29" style="border:1px solid #7C9171;">Add</th>
      <th width="55" style="border:1px solid #7C9171;">Price</th>

      <th width="55" style="border:1px solid #7C9171;">Energy</th>
      <th width="55" style="border:1px solid #7C9171;">Protein</th>
      <th width="55" style="border:1px solid #7C9171;">Carbs</th>
      <th width="55" style="border:1px solid #7C9171;">Of Sugs</th>
      <th width="55" style="border:1px solid #7C9171;">Fat</th>
      <th width="55" style="border:1px solid #7C9171;">Of Sats</th>

      <th width="55" style="border:1px solid #7C9171;">Fibre</th>
      <th width="25">&nbsp;</th>
    </tr>
</thead>
<tbody>
     <tr class="dark">
      <td width="27" bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
      <td width="20" class="leftAlign" scope="row">&nbsp;</td>
      <td width="226" class="leftAlign" scope="row">&nbsp;</td>

      <td width="33" class="leftAlign" scope="row"><div align="center">1</div></td>
      <td><input name="bread_brown1" onclick="change(this);" type="checkbox"></td>
      <td>&pound;0.60</td>
      <td>15 kcal</td>
      <td>54g</td>
      <td>10g</td>

      <td>20g</td>
      <td>30g</td>
      <td>40g</td>
      <td>50g</td>
      <td bgcolor="#9000FF">&nbsp;</td>
    </tr>
    <tr class="light">
      <td width="27" bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
      <td width="20" class="leftAlign" scope="row">&nbsp;</td>
      <td class="leftAlign" scope="row">&nbsp;</td>
      <td width="33" class="leftAlign" scope="row"><div align="center">2</div></td>
      <td><input name="bread_brown2" onclick="change(this)" value="0.80" type="checkbox"></td>
      <td >&pound;0.15</td>
      <td>15 kcal</td>

      <td>54g</td>
      <td>10g</td>
      <td>20g</td>
      <td>30g</td>
      <td>40g</td>
      <td>50g</td>

      <td bgcolor="#9000FF">&nbsp;</td>
    </tr>
    <tr class="dark">
      <td width="27" bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
      <td width="20" class="leftAlign" scope="row">&nbsp;</td>
      <td class="leftAlign" scope="row">&nbsp;</td>
      <td width="33" class="leftAlign" scope="row"><div align="center">3</div></td>
      <td><input name="bread_brown3" onclick="change(this)" value="0.80" type="checkbox"></td>

      <td>&pound;0.80</td>
      <td>15 kcal</td>
      <td>54g</td>
      <td>10g</td>
      <td>20g</td>
      <td>30g</td>

      <td>40g</td>
      <td>50g</td>
      <td bgcolor="#9000FF">&nbsp;</td>
    </tr>
    <tr class="light">
      <td width="27" bgcolor="#9000FF" scope="row">&nbsp;</td>
      <td width="20" scope="row">&nbsp;</td>
      <td class="leftAlign" scope="row">&nbsp;</td>

      <td width="33" class="leftAlign" scope="row"><div align="center">4</div></td>
      <td><input name="bread_brown4" onclick="change(this)" value="0.80" type="checkbox"></td>
      <td>&pound;0.70</td>
      <td>15 kcal</td>
      <td>54g</td>
      <td>10g</td>

      <td>20g</td>
      <td>30g</td>
      <td>40g</td>
      <td>50g</td>
      <td bgcolor="#9000FF">&nbsp;</td>
    </tr>
    <tr class="dark">

      <td bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
      <td class="leftAlign" scope="row">&nbsp;</td>
      <td class="leftAlign" scope="row">&nbsp;</td>
      <td class="leftAlign" scope="row"><div align="center">5</div></td>
      <td><input name="bread_brown5" onclick="change(this)" value="0.80" type="checkbox"></td>
      <td>&pound;0.25</td>
      <td>35 kcal</td>

      <td>63g</td>
      <td>10g</td>
      <td>20g</td>
      <td>30g</td>
      <td>40g</td>
      <td>50g</td>

      <td bgcolor="#9000FF">&nbsp;</td>
    </tr>
    <tr class="light">
      <td bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
      <td class="leftAlign" scope="row">&nbsp;</td>
      <td class="leftAlign" scope="row">&nbsp;</td>
      <td class="leftAlign" scope="row"><div align="center">6</div></td>
      <td><input name="bread_brown6" onclick="change(this)" value="0.80" type="checkbox"></td>

      <td>&pound;0.20</td>
      <td>35 kcal</td>
      <td>63g</td>
      <td>10g</td>
      <td>20g</td>
      <td>30g</td>

      <td>40g</td>
      <td>50g</td>
      <td bgcolor="#9000FF">&nbsp;</td>
    </tr>
    
<!-- more Item rows here -->
</tbody>
<tfoot>
    <tr style="background-color:#9000FF">
      <td height="20">&nbsp;</td>

      <td height="20" colspan="2">&nbsp;</td>
      <td height="20" colspan="2"><div align="center"><strong>TOTALS</strong></div></td>
      <td><div align="center">
          <input name="total1" type="text" id="total1" value="0.00" size="5">
      </div></td>
      <td><div align="center">
          <input name="total2" type="text" id="total2" value="0" size="5">
      </div></td>

      <td><div align="center">
          <input name="total3" type="text" id="total3" value="0" size="5">
      </div></td>
      <td><div align="center">
          <input name="total4" type="text" id="total4" value="0" size="5">
      </div></td>
      <td><div align="center">
          <input name="total5" type="text" id="total5" value="0" size="5">
      </div></td>

      <td><input name="total6" type="text" disabled id="total6" value="0" size="5"></td>
      <td><div align="center">
          <input name="total7" type="text" id="total7" value="0" size="5">
      </div></td>
      <td><div align="center">
          <input name="total8" type="text" id="total8" value="0" size="5">
      </div></td>
      <td width="25" height="20">&nbsp;</td>
    </tr>

</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</form>
</body>
</html>

**drennan** · 07-16-2008 11:14 AM

thats excellent. thank you so much for all your time and help

**donsity** · 11-01-2012 06:44 PM

This thread was VERY useful to me. and I Thank you very much.

However, I just need a little Variation to this solution.

VARIATION1:
I want to use a Radio button, so that only ONE option/ tr can be selected at a time. once another option is selected, the previously colored row should change to normal(white)

VARIATION2:
Instead of checkbox, i want to use a dropdown menu on each row.
each dropdown will have 2 options only. (e.g. Present / Absent)
Whenever Absent is chosen in any row, the color of that row changes to red,
and when Present is chosen, the color of that row changes to normal(maybe white) but not blank.

(Imagine that each row represent a student whose attendance we want to mark as present or absent, and there are n number of students)

I don't know if I should put this as a seperate NEW POST but i really need the help specifically from you, since you've already developed it to this level.
moreover, i have searched everywhere for this... just cant find a simple solution.

Please Help, I really Appreciate.
Thank You.

HERE's THE CODE I TRIED TO MODIFY TO VARIATION1 but didnt work as described

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Good With Checkbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode.parentNode; // this may change depending on the html used
if(obj.checked) {tr.className+=' pink';}
else {tr.className=tr.className.replace(' pink', '');}


}
</script>

<style type="text/css">
.nochange, tr {background-color:white;}
tr.pink  {background-color:red;} /* Specificity is important */
.light {background-color:white}
.dark {background-color:white}
</style>

</head>
<body>
<table border="1" cellspacing="2" cellpadding="5" summary="" width="369">
<tr class="light"><label>
<td width="25"><input type="radio" name="toggle" onclick="change(this);"></td>
<td width="136">foo</td>
<td>bar</td></label>
</tr>
<tr class="dark"><label>
<td width="25"><input type="radio" name="toggle" onclick="change(this);"></td>
<td width="136">foo</td>
<td>bar</td></label>
</tr>
</table>
</body>
</html>

Thread: [RESOLVED] Change row color when checkbox ticked

Thread Tools

Display

[RESOLVED] Change row color when checkbox ticked

I Need just a little Variation of this.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions