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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Mar 2004
    Posts
    138
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Cell Background with javaScript

    I'm working on a script that involves selecting a certain cell with a checkbox. I'd like the background of the cell to change colors to indicate that it has been clicked. I'm using the onClick event in the checkbox and it calls a function passing an argument with the table cell's id in it. I know I have to use getElementById and then change the background from there, but I have no idea how to do this.

    Thanks,
    Matt

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Basic idea is to do it this way, there are more complicated ways of doing it.
    Code:
    <script type="text/javascript">
      function changeBG(cBox,xID){
        if(cBox.checked)document.getElementById(xID).style.background='red';
        else document.getElementById(xID).style.background='white';
      }
    </script>
    the checkbox should have something like this
    Code:
    <input type="checkbox" name="CB1" onclick="changeBG(this,'tdID')">
    I did not test the code so hopefull it works!
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    You might want to check out this.........

    LovesWar

  • #4
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just fixed a couple problems with Alien51's script, this should work, I tested it

    Code:
    <script type="text/javascript">
      function changeBG(cBox,xID){
        if(cBox.checked) {
        document.getElementById(xID).style.background='red';
    }
        else
        { document.getElementById(xID).style.background='white';
      }
      }
    </script>
    
    
    <input type="checkbox" name="CB1" onclick="changeBG(this,'tdID')"><br><BR>
    
    <table height="50px" width="50px" border="1">
    <tr height="100%">
    <td width="100%" id="tdID"> Moo</td>
    </tr>
    </table>
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    đ­˘M_M÷˝kŔą

  • #5
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Quote Originally Posted by SpiritualStorms
    Think that should be assigning table cell values

  • #6
    Regular Coder
    Join Date
    Mar 2004
    Posts
    138
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok thanks!

    Matt

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by DooM_MonkeY
    I just fixed a couple problems with Alien51's script, this should work, I tested it

    Code:
    <script type="text/javascript">
      function changeBG(cBox,xID){
        if(cBox.checked) {
        document.getElementById(xID).style.background='red';
    }
        else
        { document.getElementById(xID).style.background='white';
      }
      }
    </script>
    
    
    <input type="checkbox" name="CB1" onclick="changeBG(this,'tdID')"><br><BR>
    
    <table height="50px" width="50px" border="1">
    <tr height="100%">
    <td width="100%" id="tdID"> Moo</td>
    </tr>
    </table>
    Could be simplified to:

    <input type="checkbox" name="CB1" onclick="document.getElementById('tdID').style.backgroundColor=(this.checked)?'red':'white'">
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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