Change table row/cell bgcolor when click checkbox

@dominickMar 25.2003

Hello and thank you all in advance for your help.

I would like to create a scenario along the lines of what is used in
the Microsoft Hotmail inbox. I guess you could call it a “selected
row”.

1) Table of multiple rows w/4 cells each, background color = white.
2) The first cell in each row contains a checkbox
3) Clicking on the checkbox changes the row’s background color to
gold (or any other color for that matter).
4) Removing the check from the checkbox returns the row’s background
color to white.

I have tried a number of methods but none seem to work properly. I
can’t believe this is that difficult – any ideas?

Again, sincere thanks.

Regards,

Dominick

———————————————————-

Here’s some table code showing the “on” and “off” state:

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

to post a comment

JavaScript

6 Comments(s) _↴

@JonaMar 25.2003 — #<html><head>

<script>

function changeColor(){

if(document.frm.chk1.checked){

document.getElementById("td1").style.backgroundColor="#cccc00"

} else { document.getElementById("td1").style.backgroundColor="white"

}

if(document.frm.chk2.checked){

document.getElementById("td2").style.backgroundColor="#cccc00"

} else { document.getElementById("td2").style.backgroundColor="white"}

}

</script>

</head><body>

<form name="frm">

<table align="center">

<tr>

<td bgcolor="white" id="td1"><input type=checkbox name="chk1" onclick="changeColor()"> Text</td></tr>

<tr><td bgcolor="white" id="td2"> <input type=checkbox name="chk2" onclick="changeColor()"> Text</td></tr>

</table></form></body></html>

P.S. Viewable online at: http://geocities.com/god_loves_07/changeColor.html

@jdaviaMar 26.2003 — #[i]Originally posted by dominick [/i]

[B]

I would like to create a scenario along the lines of what is used in

the Microsoft Hotmail inbox. I guess you could call it a "selected

row".

1) Table of multiple rows w/4 cells each, background color = white.

2) The first cell in each row contains a checkbox

3) Clicking on the checkbox changes the row's background color to

gold (or any other color for that matter).

4) Removing the check from the checkbox returns the row's background

color to white.

[/B][/QUOTE]
This is not exactly what you want. That is, the checkbox doesn't coltrol the cell color, instead a mouseover does. Maybe you can edit it.

<table width="60%" border="1" cellspacing="0" cellpadding="10">

<tr>

<td id= "ignore" onmouseover="bgColor='lightgreen'" onClick="window.location='page1.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" align="left" valign="center"><INPUT type="checkbox" tabindex="5" id="mspp_shared" name="mspp_shared" value="1" onclick="this.form.sec.checked=false"> I'm green on the computer.</label> </td>

</tr><tr>

<td id= "ignore" onmouseover="bgColor='lightblue'" onClick="window.location='page2.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" align="left" valign="center"><INPUT type="checkbox" tabindex="5" id="mspp_shared" name="mspp_shared" value="1" onclick="this.form.sec.checked=false"> Lightblue is nice.</label></td>

</tr><tr>

<td id= "ignore" onmouseover="bgColor='red'" onClick="window.location='page3.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" align="left" valign="center"><INPUT type="checkbox" tabindex="5" id="mspp_shared" name="mspp_shared" value="1" onclick="this.form.sec.checked=false"> How about Red.</label> </td>

</tr><tr>

<td id= "ignore" onmouseover="bgColor='yellow'" onClick="window.location='page4.html'" style="cursor:hand" onmouseout="bgColor='#FFFFFF'" align="left" valign="center"><INPUT type="checkbox" tabindex="5" id="mspp_shared" name="mspp_shared" value="1" onclick="this.form.sec.checked=false"> Thie will be Yellow.</label> </td>

</tr>

</table>

@dominickauthorMar 26.2003 — #jdavia: Thanks for the reply. Your suggestion was helpful, but only changes color on mouseover. I tried to modify it, but unfortunately that's not the way to go. To accomplish what I need, the script must evaluate a checkbox after it is clicked on to determine its value and then change the background color accordingly.

jona: Thank you also for your reply. While this was closer to what I hoped to achieve, it has one caveat that I did not consider when I posted: The form must have a pre-determined number of checkboxes and table rows so that each checkbox and row are named and then referred to specifically in the script. As it turns out, the form will be created dynamically and will have any number of rows/checkboxes up to 20.

I did stumble onto something that worked exactly as I had hoped - I've included it below. Now if I can only add a "check all" function that will work in conjunction with this I'll be all set.

Thank you both again for taking the time to share your knowledge and provide some help - it's very much appreciated.

Regards,

Dominick

=========================================

<html>

<head>

<title>Highlight Row</title>

<script>

function highlightRow (element, color) {

var temporary;

temporary=element;

while (element.tagName.toUpperCase() != 'TR' && element != null)

element = document.all ? element.parentElement : element.parentNode;

if (element)

{ if (temporary.checked)

element.bgColor = color;

else

element.bgColor = '#ffffff'; } }

</script>

</head>

<body>

<table bgcolor="#bababa" border="0" cellpadding="0" cellspacing="0">

<tr>

<td bgcolor="#bababa">

<table border="0" cellpadding="0" cellspacing="1">

<form>

<tr bgcolor="#ffffff">

<td align="center" width="25"><input type="checkbox" name="" value="" onclick="highlightRow(this,'#eee8aa');"> </td>

<td width="100"> </td>

<td width="100"> </td>

<td width="100"> </td>

</tr>

<tr bgcolor="#ffffff">

<td align="center" width="25"><input type="checkbox" name="" value="" onclick="highlightRow(this,'#eee8aa');"> </td>

<td width="100"> </td>

<td width="100"> </td>

<td width="100"> </td>

</tr>

</form>

</table>

</td>

</tr>

</table>

</body>

</html>

@JonaMar 27.2003 — #Okay. You'll need to name each one though:

<html>

<head>

<title>Highlight Row</title>

<script>

function highlightRow (element, color) {

var temporary;

temporary=element;

while (element.tagName.toUpperCase() != 'TR' && element != null)

element = document.all ? element.parentElement : element.parentNode;

if (element)

{ if (temporary.checked)

element.bgColor = color;

else

element.bgColor = '#ffffff'; } }

function selectAll(){

var farm = document.frm;

var len = farm.elements.length;

for(i=0;i<len;i++) {

if(!farm.elements[i].checked){

farm.elements[i].checked=true;

farm.all1.checked=true;

} else { farm.elements[i].checked=false; farm.all1.checked=false;}

} }

</script>

</head>

<body>

<form name="frm">

<table bgcolor="#bababa" border="0" cellpadding="0" cellspacing="0">

<tr>

<td bgcolor="#bababa">

<table border="0" cellpadding="0" cellspacing="1">

<form>

<tr bgcolor="#ffffff">

<td align="center" width="25"><input type="checkbox" name="all1" onclick="selectAll();"> </td>

<td width="100"> </td>

<td width="100"> </td>

<td width="100"> </td>

</tr>

<tr bgcolor="#ffffff">

<td align="center" width="25"><input type="checkbox" name="a2" onclick="highlightRow(this,'#eee8aa');"> </td>

<td width="100"> </td>

<td width="100"> </td>

<td width="100"> </td>

</tr>

<tr bgcolor="#ffffff">

<td align="center" width="25"><input type="checkbox" name="a3" onclick="highlightRow(this,'#eee8aa');"> </td>

<td width="100"> </td>

<td width="100"> </td>

<td width="100"> </td>

</tr>

</form>

</table>

</td>

</tr>

</table>

</form>

</body>

</html>

@Mr_JApr 21.2003 — #Hi Dominick.

Had to use this thread to get a reply to you.

For some reason I could not gain access to the other thread.

Try the following.

Instead of using the "Box"+[i] method I have change it to identify the first three letters of the element Name.

As long as these three letters are "Box" the element Name can be anything.

See how it goes

[SIZE=1]

<html>

<head>

<title>Untitled</title>

<style>

td {font-family: verdana; font-size : 11px;}

.row_white {background-color : #ffffff;}

.row_yellow {background-color : #fffacd;}

</style>

<script language="javascript" type="text/javascript">

c=0 //added

function Toggle(e){

if (e.checked) {

c++ //added

Highlight(e);

//document.MyForm.lastcheckall.checked = AllChecked();

}

else {

c-- //added

Unhighlight(e);

//document.MyForm.lastcheckall.checked = false;

}

if(c==3){ //added

document.MyForm.lastcheckall.checked = AllChecked(); //added

} //added

if(c<3){ //added

document.MyForm.lastcheckall.checked = false; //added

} //added

}

function ToggleAll(e){

if (e.checked) {CheckAll();}

else {ClearAll();}}

function Check(e){

e.checked = true;

Highlight(e);}

function Clear(e){

e.checked = false;

Unhighlight(e);}

function CheckAll(){

c=3 //added

var ml = document.MyForm;

var len = ml.elements.length;

for (var i = 0; i < len; i++) {

var e = ml.elements[i];

// Here's the first of three:

if(e.name.substring(0,3)=="Box"){ //changed

Check(e);}}

ml.lastcheckall.checked = true;}

function ClearAll(){

c=0 //added

var ml = document.MyForm;

var len = ml.elements.length;

for (var i = 0; i < len; i++) {

var e = ml.elements[i];

// the second...

if(e.name.substring(0,3)=="Box"){ //changed

Clear(e);}}

ml.lastcheckall.checked = false;}

function Highlight(e){

var r = null;

if (e.parentNode && e.parentNode.parentNode) {

r = e.parentNode.parentNode;}

else if (e.parentElement && e.parentElement.parentElement) {

r = e.parentElement.parentElement;}

if (r) {

(r.className == "row_white")

r.className = "row_yellow";}

}

function Unhighlight(e){

var r = null;

if (e.parentNode && e.parentNode.parentNode) {

r = e.parentNode.parentNode;}

else if (e.parentElement && e.parentElement.parentElement) {

r = e.parentElement.parentElement;}

if (r) {

(r.className == "row_yellow")

r.className = "row_white";}

}

function AllChecked(){

ml = document.MyForm;

len = ml.elements.length;

for(var i = 0 ; i < len ; i++) {

// and the third:

if (ml.elements[i].name.substring(0,3)== "Box" && !ml.elements[i].checked) { // changed

return false;

}}

return true;}

</script>

</head>

<body>

<form name="MyForm">

<table bgcolor="#b7b7b7" border="0" cellpadding="2" cellspacing="1" width="200">

<tr>

<td width="25"><input name="lastcheckall" onClick="ToggleAll(this)" title="Check or uncheck all messages." type="checkbox" value="3"></td>

<td width="175"><b>Check/Uncheck all</b></td>

</tr>

<tr class="row_white">

<td align="center" width="25"><input type="checkbox" onclick="Toggle(this)" name="Box0"></td>

<td>One</td>

</tr>

<tr class="row_white">

<td align="center" width="25"><input type="checkbox" onclick="Toggle(this)" name="Box1"></td>

<td>Two</td>

</tr>

<tr class="row_white">

<td align="center" width="25"><input type="checkbox" onclick="Toggle(this)" name="Box2"></td>

<td>Three</td>

</tr>

</table>

</form>

</body>

</html>

[/SIZE]

@kad6Jul 06.2005 — #Hi,

I was looking for something like this here and I'm glad I finally found it. But I do have one question: is it possible to make this script work with row highlighting onmouseover in IE? It is quite easy in FF as it uses CSS properly, but in IE I have to use:

[I]

onmouseover="this.style.backgroundColor='color';" onmouseout="this.style.backgroundColor='color';"[/I]

... and this script collapses.. ?

Is it possible to make rows highlight on hover without CSS but with this checkbox cool job here?

If so, please put an example.. Thanks!

Also in #JavaScript _↴

cross browser scrollbar styles - not just IE Help with a function Calendar request

Success!

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

Tweet This

Change table row/cell bgcolor when click checkbox

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Change table row/cell bgcolor when click checkbox

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴