Web Analytics Made Easy -
StatCounter Change td background when checkbox is checked - CodingForum

Announcement

Collapse
No announcement yet.

Change td background when checkbox is checked

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Change td background when checkbox is checked

    The title says it all. Does anyone know how I can change the background of the containing td cell of a checkbox when it's checked? And change it back when it's unchecked?

  • #2
    Well, it's easiest if you give an ID to the <TD>:

    Code:
    <table>
    <tr>
         <td id="ZAM" style="background-color: pink;">
            <input type=checkbox onclick="document.getElementById('ZAM').style.backgroundColor=this.checked?'green':'pink';">
         </td>
    ...
    But yes, you *can* find the enclosing <td> element by going "up" the list of nodes in the DOM. Ask again, if it's too hard to put the ID on the <td>
    Be yourself. No one else is as qualified.

    Comment


    • #3
      Nifty, that works for the first box. But if I give any other td's the same info they all change the color of the first box. Do I need to give every td it's own unique id?

      Comment


      • #4
        Yes, you'd have to give them all a unique id.

        That's why I asked the question about whether using an ID would be a pain in the patootie.
        Code:
        <html>
        <head>
        <script>
        function changeCell(td)
        {
            var node = td;
            while ( (node = node.parentNode) != null )
            {
                if ( node.tagName == "TD" )
                {
                    node.style.backgroundColor = td.checked ? "lightgreen" : "wheat";
                    return;
                }
            }
            // not found...give up?
        }
        </script>
        <style>
        td { background-color: wheat; }
        div { background-color: pink; margin: 20px; padding: 10px; }
        </style>
        </head>
        <body>
        <table>
        <tr>
            <th>One</th>
            <th>Two</th>
        </tr>
        <tr>
            <td><input type=checkbox onclick="changeCell(this);"></td>
            <td><div><input type=checkbox onclick="changeCell(this);"></div></td>
        </tr>
        </table>
        </body>
        The <div> is there so you can see that the "search" up the nodes will find the TD even if there are indeed nodes between the checkbox and the TD.
        Be yourself. No one else is as qualified.

        Comment


        • #5
          Ah! Perfect! Thank you so much too. I have about seventy td's and I was about thirty into giving them unique id's and it's driving me nuts. Your solution is way easier!

          Comment


          • #6
            Code:
            <select id="colors" >
            <option id="opt1"value="Stirfry 1" style="background-color:#77AA00;color:#FFFFFF" onclick="update()" >Stirfry 1</option>
            <option id="opt2"value="Stirfry 2" style="background-color:#77AA00;color:#FFFFFF" onclick="update()" >stirfry 2</option>
            <option id="opt3"value="Stirfry 3" style="background-color:#77AA00;color:#FFFFFF" onclick="update()" >stirfry 3</option>
            <option id="opt4"value="Stirfry 4" style="background-color:#77AA00;color:#FFFFFF" onclick="update()" >stirfry 4</option>
            </select>
            <script>
            function update(){
            //var selectObj=document.getElementById("colours")
            for(var i in colors.options){
                                colors.options[i].style.backgroundColor='#77AA00';
              colors.options[colors.selectedIndex].style.backgroundColor='#99FF00';
            } 
            }
                         
            </script>
            Last edited by TinyScript; Apr 16, 2009, 03:24 AM. Reason: works in firefox...sorry IE users

            Comment


            • #7
              Ummm...that's fun...and interesting...and browser specific.

              But what does it have to do with this thread??

              I don't see either a checkbox or a <td> cell in there, anywhere.
              Be yourself. No one else is as qualified.

              Comment


              • #8
                Yeah, hm. Well thank you Old Pedant, you're my hero. Everything works perfectly and looks great! I was wondering though how to set up a "Reset" button at the bottom of the form to clear the fields. The usual reset-type buttons aren't doing anything for me...

                Comment


                • #9
                  Well, if you don't have any <TD>s with checkboxes in them *EXCEPT* those used for this purpose, it's easy.

                  Code:
                  function resetAll( )
                  {
                      var tds = document.getElementsByTagName("TD");
                      for ( t = 0; t < tds.length; ++t )
                      {
                          var td = tds[t];
                          var cbs = td.getElementsByTagName("INPUT");
                          for ( c = 0; cbs != null && c < cbs.length; ++c )
                          {
                               var cb = cbs[c];
                               if ( cb.type == "checkbox" )
                               {
                                     cb.checked = false;
                                     td.style.backgroundColor = "yellow";
                               }
                          }
                      }
                  }
                  Even if it's a case of all the TDs in a given table, just start from the table instead of the entire document.

                  If you only need to reset *some* checboxes in *some* TDs, then you'd need to somehow "flag" either the particular TDs or the particular checkboxes. Could do it by giving a particular class to either of those or maybe making the is-clicked background color unique (e.g., if other TDs might have #00CCCC, then have is-clicked TDs for your purposes use #00CCCD -- the human eye won't see the difference but it will make it easy for you to recognize the TDs that need to be reset. And so on and so on.
                  Last edited by Old Pedant; Apr 16, 2009, 09:06 PM.
                  Be yourself. No one else is as qualified.

                  Comment


                  • #10
                    Clever. Yeah all the checkboxes are inside of td's and all of them would need to be reset. And that's all there is in the form so it doesn't have to be picky. Just add that code to the javascript I already have? And then do I need to add some kind of onclick funtion to the reset button do you think?

                    Comment


                    • #11
                      onClick="resetAll()" I got it! And it works great. Thank you thank you!!!

                      Comment


                      • #12
                        What if you want to change a different TD?

                        What if you want to change color for a different TD?

                        Comment

                        Working...
                        X