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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is it possible to re-color tables?

    Say you have these tables:

    <table bgcolor="#CCCCFF">blah blah blah</table>
    <table bgcolor="#CCCCFF">blah blah blah</table>
    <table bgcolor="#CCCCFF">blah blah blah</table>

    <table bgcolor="#000000">blah blah blah</table>
    <table bgcolor="#000000">blah blah blah</table>


    Is there a way to specify in CSS (or somehow) that you want all the tables that have bgcolor="#CCCCFF" to now change to bgcolor="#AAFFAA", but you want the tables with bgcolor="#000000" to stay the same ?

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Auckland New Zealand
    Posts
    115
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yep.

    Use the search and replace function in NotePad+

    Tonz
    Beware, the Cybertooth tiger cometh

  • #3
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    In the head:

    <style>
    .cls1 {background-color:#ccccff; }
    .cls2 {background-color:#aaffaa; }
    </style>

    Then the function:

    <script language="JavaScript">
    <!--
    function changeBG()
    {
    x=document.getElementsByTagName('table");
    for (i=0;i<x.length;i++)
    {
    pntr=x[i].id;
    if (document.getElementById(pntr).className='cls1')
    {
    document.getElementsById(pntr).className='cls2';
    }
    }
    }
    //-->
    </script>
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #4
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey COBOLdinosaur, thanks for the code help.. I believe it's exactly right on the right track but I can't get it to work. Can you look at this test webpage and its source code to tell me what's wrong?:

    http://members.aol.com/thecddj/TableTest2.html


    Here again is the source code:

    Code:
    <html>
    <head>
    <title>Table Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style> 
    .cls1 {background-color: "#CCCCFF"; } 
    .cls2 {background-color: "#CCFFCC"; } 
    </style> 
    
    <script language="JavaScript"> 
    function changeBG() { 
      x=document.getElementsByName('table'); 
      for (i=0;i<x.length;i++) { 
        pntr=x[i].id; 
        if (document.getElementById(pntr).className='cls1') 
          { document.getElementsById(pntr).className='cls2'; } 
      } 
    } 
    </script>
    
    </head>
    <body bgcolor="#555555">
    
    
    <center><FORM><INPUT TYPE="button" VALUE="Change Tables #1 & #3 Colors" ONCLICK="javascript:changeBG()"></FORM></center>
    
    <table border="1" cellspacing="0" width="100%" bgcolor="#CCCCFF">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>TABLE #1</b></font>
    </td></tr>
    </table>
    
    <br><br><br>
    <table border="1" cellspacing="0" width="100%" bgcolor="#FF5555">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>TABLE #2</b></font>
    </td></tr>
    </table>
    
    <br><br><br>
    <table border="1" cellspacing="0" width="100%" bgcolor="#CCCCFF">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>TABLE #3</b></font>
    </td></tr>
    </table>
    
    <br><br><br>
    <table border="1" cellspacing="0" width="100%" bgcolor="#FF5555">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>TABLE #4</b></font>
    </td></tr>
    </table>
    
    <br><br><br>
    <table border="1" cellspacing="0" width="100%" bgcolor="#CDCCFF">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>TABLES #1 & #3 SHOULD START WITH THIS "SIMILAR" COLOR</b></font>
    </td></tr>
    </table>
    
    <br><br><br>
    <table border="1" cellspacing="0" width="100%" bgcolor="#CCFFCC">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>AND TABLES #1 & #3 SHOULD END WITH THIS COLOR</b></font>
    </td></tr>
    </table>
    
    </html>

  • #5
    jtr
    jtr is offline
    New Coder
    Join Date
    Jun 2002
    Location
    Northern California
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For one you don't have </body>

  • #6
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thanks jtr. I just inserted </body> in the test webpage. But it's still not working. HELP!!! COBOLdinosaur???!!!



  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't see any class assignments in your HTML, so i guess the class attributes you wish to change are unassigned, certainly not with the value 'cls1' for which you test.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #8
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Uh Oh. I think I'm kinda over my head on this one, based on what ronaldb66 is saying. I was just trying to use COBOLdinosaur's code above, first playing with it in my usual test-it-in-webpage way to try to get it to work the way I need it to work. But I guess I need to google this topic, pull up some webpages, and start on some more lessons. Unless, of course, someone wants to volunteer a solution in the form of code? Or, give me a link to a good reference on this?

  • #9
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    instead of:
    <table border="1" cellspacing="0" width="100%" bgcolor="#CCCCFF">
    you need:
    <table border="1" cellspacing="0" width="100%" class="cls1">
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #10
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I'm stuck (for whatever reason) with having to use:

    <table border="1" cellspacing="0" width="100%" bgcolor="#CCCCFF">

    And if I CAN'T use, as a replacement:

    <table border="1" cellspacing="0" width="100%" class="cls1">

    Is there still ANY way to accomplish want I'm trying?


  • #11
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    If you have to use old-fashioned formats, then you are stuck with old fashioned problems.


    You can try changing:

    document.getElementsById(pntr).className='cls2';

    to:

    document.getElementsById(pntr).bgcolor='#aaffaa';

    But no guarantees, and certain to cause future problems.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #12
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, now I tried using document.getElementsById(pntr).bgcolor='#aaffaa' in my test code here:

    http://members.aol.com/thecddj/TableTest3.html

    Surprise surprise, it's still not working. (Note minor modification: I changed the colors of the tables in the test2 code for test3 code here merely to make it more obvious which tables should change color and which should stay the same). Please, if you have the time, look at the source code to see what I'm doing wrong.

    So, what do you think?... should I give up, or do you think there's still SOME way it can be done? Again, I'm trying to find a way (using javacsript/css/html/etc) to change the background color of all my tables having this code: <table bgcolor="#CCCCFF"> when the webpage is loaded.

  • #13
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Like this works:

    <html>
    <head>
    <title>Table Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    .cls1 {background-color:#ccccff}
    .cls2 {background-color:#ccffcc}
    </style>
    <script language="JavaScript">
    function changeBG() {
    x=document.getElementsByTagName('table');
    for (i=0;i<x.length;i++) {
    pntr=x[i].id;
    if (document.getElementById(pntr).className=="cls1")
    { document.getElementById(pntr).className="cls2"; }
    }
    }
    </script>





    </head>
    <body bgcolor="#888888">

    <center><FORM><INPUT TYPE="button" VALUE="CLICK to change ALL tables with a PURPLE background to a GREEN background" ONCLICK="javascript:changeBG()"></FORM></center>

    <hr color="#000000"><br><br>

    <br><br>
    <table id="a" border="1" cellspacing="0" width="100%" class="cls1">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>TABLE #1</b></font>
    </td></tr>
    </table>

    <br><br>
    <table id="b" border="1" cellspacing="0" width="100%" bgcolor="#666666">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>TABLE #2</b></font>
    </td></tr>
    </table>

    <br><br>
    <table id="c" border="1" cellspacing="0" width="100%" class="cls1">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>TABLE #3</b></font>
    </td></tr>
    </table>

    <br><br>
    <table id="d" border="1" cellspacing="0" width="100%" bgcolor="#666666">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>TABLE #4</b></font>
    </td></tr>
    </table>

    <br><br><br><br><hr color="#000000"><CENTER><B>TESTING RESULTS SHOULD BE:</B></CENTER>

    <br>
    <table border="1" cellspacing="0" width="100%" bgcolor="#CDCCFF">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>BEFORE BUTTON CLICK, TABLES #1 & #3 SHOULD HAVE A COLOR CLOSE TO THIS ONE</b></font>
    </td></tr>
    </table>

    <br>
    <table border="1" cellspacing="0" width="100%" bgcolor="#CCFFCC">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>AFTER BUTTON CLICK, TABLES #1 & #3 SHOULD CHANGE TO THIS COLOR</b></font>
    </td></tr>
    </table>

    <br>
    <table border="1" cellspacing="0" width="100%" bgcolor="#666666">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>AFTER BUTTON CLICK, TABLES #2 & #4 SHOULD REMAIN WITH THIS COLOR</b></font>
    </td></tr>
    </table>

    </body>
    </html>


    I forgot to put an id on the tables.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #14
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know I'm probably testing your patience by now (right, COBOLdinosaur???!!!)...

    but actually, my tables MUST keep this general format in my TEST source code:

    <table border="1" cellspacing="0" width="100%" bgcolor="#CCCCFF">
    <tr><td align="center" width="100%" height="27">
    <font size="4" color="#000000"><b>blah blah blah</b></font>
    </td></tr>
    </table>

    That's because, my final REAL (non-test) code will be appended to some already pre-existing (AND "uneditable") code which will have these <table> tags already formatted like above... and I won't be able to modify them by adding "ID", "NAME", or anything else. But anyway, I went ahead and tested your ID-included code from your previous post right above and, I really hate saying this, but it still didn't work (Uh oh, I wish it did and again I'm so sorry for being such a persistent pest). But I did notice the other change you made ("getElementsByTag Name" replacing "getElementsByName") which looks like it's getting us a little bit closer to the solution (I hope!!!!!). So what do you think? Is there still any other way this can be done without "ID"?

  • #15
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I JUST HAD A WEIRD IDEA THAT MIGHT BE ALOT EASIER!!!... a different approach I was wondering about: could I use a style sheet to set ALL table background colors to "#CCFFCC" (including the pre-existing ones that don't have ID's - that is, the ones that have "#CCCCFF") but then have another nested style sheet that would override the first style sheet so that my additional tables (which I CAN add ID's to) will have a background color of say "#000000"? Is that even possible to do? If so, how might that be coded?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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