PDA

Click to See Complete Forum and Search --> : Change table row/cell bgcolor when click checkbox

dominick
03-25-2003, 04:42 PM
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:

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

<table border="0" cellpadding="0" cellspacing="1">
<form>
<tr bgcolor="#eee8aa">
<td align="center" width="25"><input type="checkbox" checked></td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td align="center" width="25"><input type="checkbox"></td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>
</form>
</table>

</td>
</tr>
</table>
Jona
03-25-2003, 04:48 PM
<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
jdavia
03-25-2003, 06:04 PM
Originally posted by dominick


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.


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>
dominick
03-26-2003, 05:34 PM
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">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>
<tr bgcolor="#ffffff">
<td align="center" width="25"><input type="checkbox" name="" value="" onclick="highlightRow(this,'#eee8aa');"> </td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</body>
</html>
Jona
03-26-2003, 06:57 PM
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 J
04-21-2003, 11:24 AM
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



<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>
kad6
07-06-2005, 06:30 PM
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:


onmouseover="this.style.backgroundColor='color';" onmouseout="this.style.backgroundColor='color';"

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