Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2003
    Location
    in a small damp cupboard
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    tablecell bgcolor depending on status of checkbox

    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

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New Coder
    Join Date
    May 2003
    Location
    in a small damp cupboard
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    smashing, thanks man: worked a treat


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •