PDA

View Full Version : Is it possible to re-color tables?

tired&lonely
09-02-2002, 09:14 PM
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 ?
Tonz
09-02-2002, 10:25 PM
Yep.

Use the search and replace function in NotePad+ (http://www.mypeecee.org/rogsoft/)

Tonz:cool:
COBOLdinosaur
09-02-2002, 10:39 PM
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>
tired&lonely
09-03-2002, 12:37 AM
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:


<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>
jtr
09-03-2002, 05:50 AM
For one you don't have </body>
tired&lonely
09-03-2002, 09:17 AM
Ok, thanks jtr. I just inserted </body> in the test webpage. But it's still not working. HELP!!! COBOLdinosaur???!!!
:mad:
:(
:confused:
ronaldb66
09-03-2002, 09:52 AM
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.
tired&lonely
09-03-2002, 02:28 PM
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?:rolleyes:
COBOLdinosaur
09-03-2002, 10:34 PM
instead of:
<table border="1" cellspacing="0" width="100%" bgcolor="#CCCCFF">
you need:
<table border="1" cellspacing="0" width="100%" class="cls1">
tired&lonely
09-04-2002, 03:07 AM
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?

:confused:
COBOLdinosaur
09-04-2002, 11:26 PM
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.
tired&lonely
09-05-2002, 03:12 AM
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.
COBOLdinosaur
09-06-2002, 12:03 AM
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.
tired&lonely
09-06-2002, 11:31 AM
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"?
tired&lonely
09-06-2002, 01:06 PM
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?
MCookie
09-06-2002, 01:09 PM
That's not so weird. It's easy:
http://www.alistapart.com/stories/alternate/
tired&lonely
09-06-2002, 01:20 PM
To show you the overall structure of the code which might help you understand my problem (and if my CSS idea might work):


{pre-exsting source code that has <tables> with "#CCCCFF" but need to be changed and end up as "#CCFFCC"}

{style sheets that affect the entire webpage; plus my source code with my additional <tables> that need to end up as "#000000"}

{more pre-exsting source code that has more <tables> with "#CCCCFF" that need to be changed and end up as "#CCFFCC" too}
MCookie
09-06-2002, 01:36 PM
<deleted>
matt.birchall
09-06-2002, 08:32 PM
The code sample from COBOLdinosaur includes this...
ONCLICK="java script:changeBG()"
which should be
ONCLICK="javascript:changeBG()"

(Now works on IE6)
tired&lonely
09-06-2002, 09:44 PM
Yup, that makes COBOLdinosaur's code work wonderfully. But again, to avoid having to include "ID" and "Class" in the table tags (which for my purposes I won't be able to do), I wish something "like" this would work:

<script language="JavaScript">
function changeBG() {
if (document.getElementsByTagName('table').bgcolor='#CCCCFF')
{ document.getElementsByTagName('table').bgcolor='#CCFFCC'; }
}
</script>

Is there a "correct" version of this that would work?
tired&lonely
09-07-2002, 03:49 AM
Or, set up style sheets, or something, with these required conditions:


{a GLOBAL style that would affect ALL tables in a webpage to make them have a background color of "#CCFFCC" -- regardless of what background color is declared inside their tags, and without using "ID", "NAME", "CLASS" or anything else inside the tags }

Can this be done?


{BUT THEN, another style which would override the GLOBAL style above but just for SELECTIVE tables so that they can have a different background color -- and THESE selective tables CAN have "ID", "NAME", "CLASS" or something else inside the tags if that helps to override the global style}

Can this be done somehow too?
COBOLdinosaur
09-07-2002, 05:04 PM
<style>
table {background-color:#ccffcc}
table.class1 {background-color:#000000 }
</style>

Should work. The default #ccffcc get applied to all tables, but any table with class="class1" would be #000000 because class descriptors take priority over tag descriptors.
tired&lonely
09-07-2002, 11:30 PM
Thank you soooooooooooo much, COBOLdinosaur!!!!! :thumbsup:

That was the PERFECT fix for my problem. :o

You're an absolute genius!!!!! :D
hairynugs6382
09-10-2002, 01:56 AM
maybe this:

<html>
<head>
<style>
.table1{background-color:black;}
</style>
</head>
<body>
<table>
<tr><td bgcolor="white"><a href="javascript:void(null)" onclick="this.className='table1'">Blah Blah Blah Blah....</a></td></tr>
</table>
</body>
</html>

its not the best but it lets you recolor a table row!