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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    905
    Thanks
    23
    Thanked 5 Times in 5 Posts

    Colouring Table BG's with Javascript help

    Hi all,

    Been doing a bit of JS and have just started playing some IF statements.. and setting variables etc etc.. came up with a question ..

    Is it possible to set the BG colour of a straight HTML table cell with JS?

    So, IF statement works out if something 'is' something or not, and if it is... sets a colour I can use on just on cell .. For instance, is there a away I can call the variable in the bgcolor='' field of the table, I have done document.write(content) which obviously wipes whole page.. and also printed using a span.. again cant put span syntax in the bgcolor tag...

    bit lost

    any pointers?
    thanks all
    Sir P

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You may create/change the CSS style attributes (or change some classes). Here's a basic example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="txt/javascript">
    <script type="text/javascript">
    function changeBG(col){
    document.getElementById('mytab').style.backgroundColor=col;
    }
    </script>
    </head>
    <body>
    <table id="mytab" width="300" border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    <br>
    <br>
    <input type="button" value="red" onclick="changeBG('#FF0000')">
    <input type="button" value="blue" onclick="changeBG('#0000CC')">
    <input type="button" value="green" onclick="changeBG('#006600')">
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    905
    Thanks
    23
    Thanked 5 Times in 5 Posts
    Thanks Kor your a great help ...

    Trying to call a colour change now with an IF... like this ..

    var data = 2;
    if (data==2){
    function changeBG('#FF0000');
    }
    but it errors the page, object expected..

    any ideas what im doing wrong?

    thanks

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    905
    Thanks
    23
    Thanked 5 Times in 5 Posts
    ah it was because I used the word function..

    var data = 2;
    if (data==2){
    changeBG('#FF0000');
    }
    doh silly me.. anyway that doesnt error, but doesnt change the colour...

    any ideas whats wrong?

    cheers again =]

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    var data = 2;
    if (data==2){
    changeBG('#FF0000');
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    javascript works like that. Page has elements, elements have properties, properties have values. In order to create/change/remove elements/properies/value, javascript uses methods. Methods are nested in functions. Functions are called by events, following a user's action.

    Now, you need a function and an event that means you need to nest

    var data = 2;
    if (data==2){
    changeBG('#FF0000');
    }

    in a function and you have to call it when an event happens. Which might be that event?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    905
    Thanks
    23
    Thanked 5 Times in 5 Posts
    Ah I get you .. yeh it wasnt being called..

    I now have
    function setCol(){
    var data = 2;
    if (data=2){
    changeBG('#FF0000');
    }}
    and

    <body onload="setCol();">
    fantastic.. works great... thanks agian for all your help

    sirp

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    take care:

    if (data==2){
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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