...

View Full Version : Changing all the row background colors when checkbox checked



jessjenn
12-29-2003, 08:42 AM
Just like the title says, I'd like to change all the row background colors in a table when a checkbox checked (and undo it changing it back to white when unchecked). 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!

jessjenn
12-29-2003, 05:19 PM
I managed to change the colors of all the rows by changing the color of the table's background when the checkbox is checked. It switches back to white when unchecked as intended to. The only problem I'm having is when I hover the mouse over each row. I have code in there that changes the background color of each row when the mouse hovers each row.

The problem is that once the mouse hovers over a row, and the top left checkbox checked (row 1, column 1), that row doesn't change color along with the other rows. Here's the code:



<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">
<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>




Any help is appreciated. Thanks.

jessjenn
12-29-2003, 09:04 PM
This is what it looks like: http://a.1asphost.com/mikky/exp91.htm

You can see the problem when you click the top left checkbox then after hovering over all the other rows. The color of those rows don't change.

jessjenn
12-30-2003, 11:26 PM
Anyone?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum