Changing all the row background colors when checkbox checked

[jessjenn]

Just like the title says, I'd like to change all the row background colors in a table when a checkbox checked. Not just any checkbox, however, only the checkbox found at row 1, column 1. This is the code that I have:


<script type="text/javascript">
function highlight_row(the_element, checkedcolor) {
if(the_element.parentNode.parentNode.style.backgroundColor != checkedcolor) {
the_element.parentNode.parentNode.style.backgroundColor = checkedcolor;
} else {
the_element.parentNode.parentNode.style.backgroundColor = 'white';
}
}

function set_hover(the_row, color, checkedcolor) {
if(the_row.style.backgroundColor != checkedcolor) {
the_row.style.backgroundColor = color;
}
}

function remove_hover(the_row, color, checkedcolor) {
if(the_row.style.backgroundColor != checkedcolor) {
the_row.style.backgroundColor = color;
}
}
</script>

<form action="someform.php" method="post">
<table width="48%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="4%"><input type="checkbox" name="checkbox2" value="checkbox"> </td>
<td width="17%">Hero</td>
<td width="20%">FirstName</td>
<td width="59%">LastName</td>
</tr>
<tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF','orange')">
<td><input type="checkbox" name="checkbox1" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
<td>Batman</td>
<td>Bruce</td>
<td>Wayne</td>
</tr>
<tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')">
<td><input type="checkbox" name="checkbox2" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
<td>Spider-Man</td>
<td>Peter</td>
<td>Parker</td>
</tr>
<tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')">
<td><input type="checkbox" name="checkbox3" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
<td>Venom</td>
<td>Eddie</td>
<td>Brock</td>
</tr>
<tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')">
<td><input type="checkbox" name="checkbox4" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
<td>Superman</td>
<td>Clark</td>
<td>Kent</td>
</tr>
</table>
<input type="submit" value="submit">
</form>


So far I have it so that when you click on a checkbox other than the one found at row 1, column 1, it changes the color of only that particular row.

Any thoughts? Thanks!

[furious70]

when you're passing 'this' in your onmouseovers, what is it? It sounds like it's the tr it's sitting inside, not the table as you're thinking? It would seem like you need a loop to do what you want in the style you have going here (manipulating the rows)

[jessjenn]

Thanks for the reply. Yes, I figured as much, just having some trouble with the actual JavaScript code. Do you have any code that would do that? Thanks.

[furious70]

you could use the getElementsByTagName to get all the rows in the table, then loop over them

[jessjenn]

You have any sample code? I looked into it, but can't succesfully put anything that comes close. I'm not a JavaScript programmer. Thanks.

[furious70]

how about something along these lines:


myTRArray = document.getElementByTagName('tr');

for (i=0; i < myTRArray.length; i++)
{
//manipulate myTRArray[i] here as you like
// perhaps
myTRArray[i].style.backgroundColor = checkedcolor;

}

[stoodder]

hmm okay so im not sure but you could try by making the chckbox value the name of the <tr> then use a javascript sorta like this:


<script>
if(document.form.checkbox == checked) {
document.getElementByName(document.form.checkbox.value).style.background = color;
} else {
document.getElementByName(document.form.checkbox.value).style.background = othercolor;
}
</script>


though im not really sure, i dont think that you can run a style with a getElementBy function, but why not give it a try?

[stoodder]

here i dont know if this helps or not but i typed up a script, i think this is what your looking for?

also if you need me to edit any of the HTML for you i can.


<html>
<head>
<script language="javascript">
<!--
var doneload = false;
var moreload = false;
var trid = Array();
var changecolor = "FF9900"; //Change this to the color you want the TR's ot be if the checkbox is checked
var unchangecolor = "0022CC"; //Change this to the color you want the TR's ot be if the checkbox is unchecked
var divnum = 6; //change this to the number of DIV'son your page
function changerow() {
if(doneload) {
if(!moreload) {
for(i=0;i<divnum;i++) {
trid[i] = "trs"+i;
}
moreload = true;
}
for(i=0;i<divnum;i++) {
if(document.checkers.chk[i].checked) {
document.getElementById(trid[i]).outerHTML = "<div id=\"trs"+i+"\" style=\"background-color:" + changecolor + ";\">" + document.getElementById(trid[i]).innerHTML + "</div>";
} else {
document.getElementById(trid[i]).outerHTML = "<div id=\"trs"+i+"\" style=\"background-color:" + unchangecolor + ";\">" + document.getElementById(trid[i]).innerHTML + "</div>";
}
}
} else {
alert("page is not yet done loading");
}
}

function loaded() {
if(!doneload){
doneload = true;
return doneload;
} else {
alert("page has already loaded");
}
}
-->
</script>
</head>
<body onload="loaded();changerow();">
<form name="checkers">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td bgcolor="#000000">
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td>
<div id="trs0">
<table width="100%">
<tr>
<td><input type="checkbox" onClick="changerow();" id="chk" name="chk" value="ON"></td>
<td>stuff</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="trs1">
<table width="100%">
<tr>
<td><input type="checkbox" onClick="changerow();" id="chk" name="chk" value="ON"></td>
<td>stuff</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="trs2">
<table width="100%">
<tr>
<td><input type="checkbox" onClick="changerow();" id="chk" name="chk" value="ON"></td>
<td>stuff</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="trs3">
<table width="100%">
<tr>
<td><input type="checkbox" onClick="changerow();" id="chk" name="chk" value="ON"></td>
<td>stuff</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="trs4">
<table width="100%">
<tr>
<td><input type="checkbox" onClick="changerow();" id="chk" name="chk" value="ON"></td>
<td>stuff</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="trs5">
<table width="100%">
<tr>
<td><input type="checkbox" onClick="changerow();" id="chk" name="chk" value="ON"></td>
<td>stuff</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td></tr></table>
</body>

[jessjenn]

Thanks for the reply. stoodder, your solution is close to what I want except I'd like to have only one checkbox that changes the color of all the rows at once. That checkbox will be located at column 1, row 1. To see what I have so far, go to:

http://a.1asphost.com/mikky/exp91.htm

Try checking the checkbox at column 1, row 1 first without hovering the mouse over the other rows.</strong> Then hover over the other rows. Hit that checkbox again and you'll notice that it won't change colors anymore. If possible, I'd like to maybe just change my code or add to my code rather than rewrite the whole thing. But if it comes to it, I'll just rewrite it. It seems that the color change due to the hovering of the mouse is conflicting with checkboxes.

So that's the problem. :)

If you can't view the page, its source is:


<script type="text/javascript">

function highlight_row(the_element, checkedcolor) {
if(the_element.parentNode.parentNode.style.backgroundColor != checkedcolor) {
the_element.parentNode.parentNode.style.backgroundColor = checkedcolor;
} else {
the_element.parentNode.parentNode.style.backgroundColor = 'white';
}
}

function set_hover(the_row, color, checkedcolor) {
if(the_row.style.backgroundColor != checkedcolor) {
the_row.style.backgroundColor = color;
}
}

function remove_hover(the_row, color, checkedcolor) {
if(the_row.style.backgroundColor != checkedcolor) {
the_row.style.backgroundColor = color;
}
}

function set_table_color(color, checkedcolor) {
if(tablecolor.style.backgroundColor != checkedcolor) {
tablecolor.style.backgroundColor = checkedcolor;
} else {
tablecolor.style.backgroundColor = 'white';
}
}

</script>

<form action="someform.php" method="post" name="xxxxxxxxxxxx">
<table width="48%" border="1" cellspacing="1" cellpadding="1" id="tablecolor">
<tr>
<td width="4%"><input type="checkbox" name="checkbox2" value="checkbox" onClick="set_table_color('#FFFFFF','orange')" > </td>
<td width="17%">Hero</td>
<td width="20%">FirstName</td>
<td width="59%">LastName</td>
</tr>
<tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF','orange')">
<td><input type="checkbox" name="checkbox1" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
<td>Batman</td>
<td>Bruce</td>
<td>Wayne</td>
</tr>
<tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')">
<td><input type="checkbox" name="checkbox2" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
<td>Spider-Man</td>
<td>Peter</td>
<td>Parker</td>
</tr>
<tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')">
<td><input type="checkbox" name="checkbox3" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
<td>Venom</td>
<td>Eddie</td>
<td>Brock</td>
</tr>
<tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')">
<td><input type="checkbox" name="checkbox4" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
<td>Superman</td>
<td>Clark</td>
<td>Kent</td>
</tr>
</table>
<input type="submit" value="submit">
</form>



furious70, I tried your code but was unsuccessful. Thanks anyways.

[stoodder]

ah alright hol don lemme edit my script a bit then ill get back to you, i think i know how to do it hold on a second k.

Edit:

Few took me a bit sry about that, accidently closed and didnt save y docuemtn once lol so thatdidnt help but heres the code:


<html>
<head>
<script language="javascript">
<!--
var doneload = false;
var moreload = false;
var trid = Array();
var hovnum = 0;
var allon = false;
var rowon = Array();
var changecolor = "FF9900"; //Change this to the color you want the TR's ot be if the checkbox is checked
var unchangecolor = "0022CC"; //Change this to the color you want the TR's ot be if the checkbox is unchecked
var hovercolor = "AA5599";
var rowcolor = "00CC66";
var divnum = 4; //change this to the number of DIV'son your page

function loaded() {
if(!doneload){
doneload = true;
return doneload;
} else {
alert("page has already loaded");
}
}

function changeall() {
if(doneload) {
if(!moreload) {
for(i=0;i<divnum;i++) {
trid[i] = "div"+i;
}
moreload = true;
}
if(document.checkers.chk.checked) {
allon = true;
for(i=0;i<divnum;i++) {
if(!rowon[i]) {
document.getElementById(trid[i]).outerHTML = "<div id=\"div"+i+"\" style=\"background-color:" + changecolor + ";\">" + document.getElementById(trid[i]).innerHTML + "</div>";
}
}
} else {
allon = false;
for(i=0;i<divnum;i++) {
if(!rowon[i]) {
document.getElementById(trid[i]).outerHTML = "<div id=\"div"+i+"\" style=\"background-color:" + unchangecolor + ";\">" + document.getElementById(trid[i]).innerHTML + "</div>";
}
}
}
} else {
alert("page is not yet done loading");
}
}

function changerow(rowObj,rowID) {
if(doneload) {
rowObj = new Object(rowObj);
if(rowObj.checked) {
rowon[rowID] = true;
} else {
rowon[rowID] = false;
}
} else {
alert("page is not yet loaded");
}
}

function hover(hoverObj) {
if(doneload) {
hoverObj = new Object(hoverObj);
hoverObj.parentNode.style.backgroundColor = hovercolor;
} else {
alert("page is not yet loaded");
}
}

function hoveroff(hoverObj,hoverID) {
if(doneload) {
hoverObj = new Object(hoverObj);
if(!rowon[hoverID]) {
if(allon) {
hoverObj.parentNode.style.backgroundColor = changecolor;
} else {
hoverObj.parentNode.style.backgroundColor = unchangecolor;
}
} else {
hoverObj.parentNode.style.backgroundColor = rowcolor;
}
} else {
alert("page is not yet loaded");
}
}
-->
</script>
</head>
<body onload="loaded();changeall();">
<form name="checkers">
<table border="0" cellpadding="0" cellspacing="0" width="48%"><tr><td bgcolor="#000000">
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td>
<div>
<table bgcolor="B0B0B0" width="100%">
<tr>
<td width="4%"><input type="checkbox" onClick="changeall();" name="chk"></td>
<td width="17%">Hero</td>
<td width="20%">FirstName</td>
<td width="59%">LastName</td>
</tr>
</table>
<div>
</td>
</tr>
<tr>
<td>
<div id="div0">
<table width="100%" onMouseOver="hover(this);" onMouseOut="hoveroff(this,'0');">
<tr>
<td width="4%"><input type="checkbox" onClick="changerow(this,'0');"></td>
<td width="20%">Batman</td>
<td width="20%">Bruce</td>
<td width="56%">Wayne</td>
</tr>
</table>
<div>
</td>
</tr>
<tr>
<td>
<div id="div1">
<table width="100%" onMouseOver="hover(this);" onMouseOut="hoveroff(this,'1');">
<tr>
<td width="4%"><input type="checkbox" onClick="changerow(this,'1');"></td>
<td width="20%">Spider-Man</td>
<td width="20%">Peter</td>
<td width="56%">Parker</td>
</tr>
</table>
<div>
</td>
</tr>
<tr>
<td>
<div id="div2">
<table width="100%" onMouseOver="hover(this);" onMouseOut="hoveroff(this,'2');">
<tr>
<td width="4%"><input type="checkbox" onClick="changerow(this,'2');"></td>
<td width="20%">Venom</td>
<td width="20%">Eddie</td>
<td width="56%">Brock</td>
</tr>
</table>
<div>
</td>
</tr>
<tr>
<td>
<div id="div3">
<table width="100%" onMouseOver="hover(this);" onMouseOut="hoveroff(this,'3');">
<tr>
<td width="4%"><input type="checkbox" onClick="changerow(this,'3');"></td>
<td width="20%">Superman</td>
<td width="20%">Clark</td>
<td width="56%">Kent</td>
</tr>
</table>
<div>
</td>
</tr>
</table>
</td></tr></table>
</body>

[stoodder]

lol here i edited the javascript so that the cell blink now when you mouse over them woohoo... lol yea its pretty crude but if your looking for something to get ya throguh her you go:


<html>
<head>
<script language="javascript">
<!--
var doneload = false;
var moreload = false;
var trid = Array();
var dohov = true;
var allon = false;
var rowon = Array();
var changecolor = "FF9900"; //Change this to the color you want the TR's ot be if the checkbox is checked
var unchangecolor = "0022CC"; //Change this to the color you want the TR's ot be if the checkbox is unchecked
var rowcolor = "00CC66";
var divnum = 4; //change this to the number of DIV'son your page
var speed = 10;

var hovercolor = Array(
"2200BB",
"4400AA",
"550088",
"770077",
"991166",
"AA1144",
"CC1133",
"EE1122",
"FF2200");
hovnum = hovercolor.length;
var theID = "div0";

function loaded() {
if(!doneload){
doneload = true;
return doneload;
} else {
alert("page has already loaded");
}
}

function changeall() {
if(doneload) {
if(!moreload) {
for(i=0;i<divnum;i++) {
trid[i] = "div"+i;
}
moreload = true;
}
if(document.checkers.chk.checked) {
allon = true;
for(i=0;i<divnum;i++) {
if(!rowon[i]) {
document.getElementById(trid[i]).style.backgroundColor = changecolor;
}
}
} else {
allon = false;
for(i=0;i<divnum;i++) {
if(!rowon[i]) {
document.getElementById(trid[i]).style.backgroundColor = unchangecolor;
}
}
}
} else {
alert("page is not yet done loading");
}
}

function changerow(rowObj,rowID) {
if(doneload) {
rowObj = new Object(rowObj);
if(rowObj.checked) {
rowon[rowID] = true;
} else {
rowon[rowID] = false;
}
} else {
alert("page is not yet loaded");
}
}

function runhover(hoverObj) {


}

function runhover() {
if(dohov) {
cnum = hovnum - 1;
dohov = false;
}
cnum = cnum - 1;
if(cnum == hovnum*-1) {
cnum = hovnum - 1;
}
}
function hover(hoverID) {
if(doneload) {
if(hoverID != "" && hoverID != null && hoverID != undefined) {
theID = "div"+hoverID;
hoverID = null;
}
runhover();
document.getElementById(theID).style.backgroundColor = hovercolor[Math.abs(cnum)];
timeoutvar = setTimeout('hover()',Math.round(1000/speed));
} else {
alert("page is not yet loaded");
}
}

function hoveroff() {
if(doneload) {
hoverID = theID.replace(/div(.+?)/g, "$1");
if(!rowon[hoverID]) {
if(allon) {
document.getElementById(theID).style.backgroundColor = changecolor;
} else {
document.getElementById(theID).style.backgroundColor = unchangecolor;
}
} else {
document.getElementById(theID).style.backgroundColor = rowcolor;
}
clearTimeout(timeoutvar);
} else {
alert("page is not yet loaded");
}
}
-->
</script>
</head>
<body onload="loaded();changeall();">
<form name="checkers">
<table border="0" cellpadding="0" cellspacing="0" width="48%"><tr><td bgcolor="#000000">
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td>
<div>
<table bgcolor="B0B0B0" width="100%">
<tr>
<td width="4%">
<input type="checkbox" onClick="changeall();" name="chk" value="ON"></td>
<td width="17%">Hero</td>
<td width="20%">FirstName</td>
<td width="59%">LastName</td>
</tr>
</table>
<div>
</td>
</tr>
<tr>
<td>
<div id="div0">
<table width="100%" onMouseOver="hover('0');" onMouseOut="hoveroff();">
<tr>
<td width="4%">
<input type="checkbox" onClick="changerow(this,'0');" value="ON"></td>
<td width="20%">Batman</td>
<td width="20%">Bruce</td>
<td width="56%">Wayne</td>
</tr>
</table>
<div>
</td>
</tr>
<tr>
<td>
<div id="div1">
<table width="100%" onMouseOver="hover('1');" onMouseOut="hoveroff();">
<tr>
<td width="4%">
<input type="checkbox" onClick="changerow(this,'1');" value="ON"></td>
<td width="20%">Spider-Man</td>
<td width="20%">Peter</td>
<td width="56%">Parker</td>
</tr>
</table>
<div>
</td>
</tr>
<tr>
<td>
<div id="div2">
<table width="100%" onMouseOver="hover('2');" onMouseOut="hoveroff();">
<tr>
<td width="4%">
<input type="checkbox" onClick="changerow(this,'2');" value="ON"></td>
<td width="20%">Venom</td>
<td width="20%">Eddie</td>
<td width="56%">Brock</td>
</tr>
</table>
<div>
</td>
</tr>
<tr>
<td>
<div id="div3">
<table width="100%" onMouseOver="hover('3');" onMouseOut="hoveroff();">
<tr>
<td width="4%">
<input type="checkbox" onClick="changerow(this,'3');" value="ON"></td>
<td width="20%">Superman</td>
<td width="20%">Clark</td>
<td width="56%">Kent</td>
</tr>
</table>
<div>
</td>
</tr>
</table>
</td></tr></table>
</body>
</html>

[jessjenn]

That's awesome! I like the fade in/out effect! Do you have to use tables for each row though? The data I use in the row fields are sometimes large and it doesn't align. I'm going to try mix it in with my code so when you click on the "check all" checkbox it checks all the other checkbox.

This is what I have now, as far as the checkboxes. I like your solution except that I can't get it to align. Also, I briefly tried adding the checkbox that checks all the other checkboxes to your code and couln't get it to work. I have to spend more time on it though:



http://a.1asphost.com/mikky/exp0.htm

[stoodder]

lol sry about the whole tables thing, i think you might be able to do it with just the TR actually im pretty sure you can, if you want i could update the code for you and make the checkbox think if you wanted.... im guessing you want it so that when all the checkboxes are checked the rows change the same color as they would if just ne was checked?

[jessjenn]

Yeap, that's what I'm looking for. It's kind of like how Hotmail and Yahoo! do it when you're selecting e-mails to delete. I'd like to keep it looking as much as to my original look shown in the URL I provide.

I appreciate all the help so far! I've posted this on a few forums (as you saw before LOL) but people just aren't being too responsive, except for a very limited few. Thanks again!

[stoodder]

lol yep its 11PM right now so i think ill get to work on it tommorrow.. i have basketball practice early tommorrow morning... lol sry but ill for sure have it to you by tommorrow k.

[jessjenn]

No problem. Thanks again!

[jessjenn]

Can anyone else take on this impossible task? :p

[stoodder]

lol sry i didnt reply, new years was buisier then i thought lol, sry about that, ugh i want to work on your script but im stuck on one of my own... i making a frum system, that needs to be better than Vbulletin ugh, lol im working on a WYSIWYG editor right now and im stuck, for some messed up reason my regular expressoins are being anal... gah javascript works nothign like PHP lol

[jessjenn]

No problem. You helped me enough. :) You working on a rich textbox? In case you want to use a premade one, consider using htmlArea. It's free even for commercial use, and rocks. If you haven't heard of it, check it out:

http://www.interactivetools.com/products/htmlarea/index.html