PDA

View Full Version : tablecell bgcolor depending on status of checkbox

mrjamin
07-20-2003, 06:16 PM
Ok - here's the deal.

I have a page with several checkboxes, each in its own tablecell. What i'd like to happen, is when the user checks a checkbox, the cell its contained in changes color. My JS knowledge is pretty (well, VERY) limited. What's also pretty important is when the user unchecks a checbox, the background colour of the containing cell reverts back to the original color. "why?" i hear you ask? I'm creating a dynamic (php + mysql) session booking system for some rehersal studios. Each slot for each hour is represented by a checkbox in a table cell.

See here (http://impactstudios.co.uk/book.php) for what i mean!

Thanks in advance,

MrJ
cheesebagpipe
07-20-2003, 09:39 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

td {
width: 32px;
height: 32px;
text-align: center;
border: 1px black solid;
}

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

function swapColor(oCheckbox) {
var pop = oCheckbox, checkedcolor = 'yellow';
while (pop.nodeType != 1 || pop.nodeName.toLowerCase() != 'td')
pop = pop.parentNode;
if (typeof pop.oldcolor == 'undefined') pop.oldcolor = pop.style.backgroundColor;
pop.style.backgroundColor = (oCheckbox.checked) ? checkedcolor : pop.oldcolor;
}

</script>
</head>
<body>
<table>
<tr>
<td style="background-color:sienna;"><input type="checkbox" onclick="swapColor(this)" />
<td style="background-color:coral;"><input type="checkbox" onclick="swapColor(this)" />
<td style="background-color:skyblue;"><input type="checkbox" onclick="swapColor(this)" />
</tr><tr>
<td style="background-color:salmon;"><input type="checkbox" onclick="swapColor(this)" />
<td style="background-color:lawngreen;"><input type="checkbox" onclick="swapColor(this)" />
<td style="background-color:violet;"><input type="checkbox" onclick="swapColor(this)" />
</tr>
</table>
</body>
</html>

You'll need to specify the TD bgcolors as noted. Could be modified to do different colors per cell, if you had a scheme.
mrjamin
07-21-2003, 01:00 AM
smashing, thanks man: worked a treat