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 for what i mean!

Thanks in advance,

MrJ

cheesebagpipe · 07-20-2003, 09:39 PM

Code:

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