 |
| |
Boudga
Maniac (V) Mad Scientist
From: Jacks raging bile duct....
Insane since: Mar 2000
|
posted 08-19-2002 02:33
Does anyone know of a javascript that will generate alternating colors for multiple table rows? If anyone here has ever used "greenbar" paper in a dot matrix printer...that is the effect I'm shooting for.
|
CPrompt
Maniac (V) Inmate
From: there...no..there.....
Insane since: May 2001
|
posted 08-19-2002 04:25
hmmm. . . Don't know of one in JavaScript but I have seen it done using PHP and sometimes PHP and MySQL. Check out hotscripts
Later,
C:\
~Binary is best~
[This message has been edited by Boudga (edited 08-19-2002).]
|
Boudga
Maniac (V) Mad Scientist
From: Jacks raging bile duct....
Insane since: Mar 2000
|
posted 08-19-2002 04:32
I found it here! I'm going to try it out and let everyone know if it works.
[This message has been edited by Boudga (edited 08-19-2002).]
|
Petskull
Maniac (V) Mad Scientist
From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000
|
posted 08-19-2002 05:14
damn!
I was thinking if this worked:
// document.body.childNodes.3.childNodes.0.rows.0.bgColor =
function chhead(){
tab = document.getElementById("myTable").rows.0;
tab.bgColor = #FF0000;
}
-we could just use a loop to change that '0' to all the even numbers up to a point..
{edit} btw- it *doesn't* work... it keeps telling me it needs a ';' after rows but before the period...
Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342
[This message has been edited by Petskull (edited 08-19-2002).]
|
CPrompt
Maniac (V) Inmate
From: there...no..there.....
Insane since: May 2001
|
posted 08-19-2002 13:53
I am sure that it will work. If it's on hotscripts then it is something to at the least check out. Glad that the link helped some.
Later,
C:\
~Binary is best~
|
kuckus
Bipolar (III) Inmate
From: Berlin (almost)
Insane since: Dec 2001
|
posted 08-19-2002 15:19
Petskull: I'm not sure that makes any difference but you might try
document.getElementById("myTable").rows[0];
kuckus (cell #282)
|
meccaman
Nervous Wreck (II) Inmate
From:
Insane since: Aug 2002
|
posted 08-22-2002 02:12
I don't know how ur building the table, but if ur generating it using a loop you could just mod the loop count by 2 and check to see if it's equal to 0 then handle the coloring.
i.e.
for (x=0; x < rows.length; x++) {
// tr is reference to row element
if (x%2 == 0) {
tr.style.backgroundColor = someColor; // or tr.className = 'evenLine'
} else {
// use default and don't have an else or set odd color in the same style as above
}
.
.
.
}
meccaman
|
Boudga
Maniac (V) Mad Scientist
From: Jacks raging bile duct....
Insane since: Mar 2000
|
posted 08-22-2002 04:20
I am using the script located at the URL posted in my second post in this thread and it works, however I'm wondering if there is a way to allow a visitor to the site to toggle the bgcolors of the table rows on/off on the fly with out a page reload....possibly by using a style sheet??? Make sense?
[This message has been edited by Boudga (edited 08-22-2002).]
|
andy_j
Nervous Wreck (II) Inmate
From: uk
Insane since: Aug 2002
|
posted 08-22-2002 06:19
Hi, brilliant forum you have here.. My first post
I was interested to get a javascript version working so used the bits of code from above and glued it all together. This should work with any table, you just need to stick an id in the table tag.
<html>
<head>
<script language="javascript">
function colRow(el) {
var ele = document.getElementById(el);
for(x=0;x<ele.rows.length;x++) {
if (x%2==0) {
ele.rows[x].style.backgroundColor="#ff0000";
} else {
ele.rows[x].style.backgroundColor="#0000ff";
}
}
}
function clearRow(el) {
var ele = document.getElementById(el);
for(x=0;x<ele.rows.length;x++) {
ele.rows[x].style.backgroundColor="transparent";
}
}
</script>
</head>
<body>
<table cellpadding="3" cellspacing="3" id="myTable" border="1">
<tr class="clear"><td>One</td></tr>
<tr class="clear"><td>Two</td></tr>
<tr class="clear"><td>Three</td></tr>
<tr class="clear"><td>Four</td></tr>
<tr class="clear"><td>Five</td></tr>
<tr class="clear"><td>Six</td></tr>
<tr class="clear"><td>Seven</td></tr>
<tr class="clear"><td>Eight</td></tr>
</table>
<a href="javascript: colRow('myTable')">Color those rows!!</a><br>
<a href="javascript: clearRow('myTable')">Clear those rows!!</a>
</body>
</html>
Seems to work ok, and allows you to toggle on or off the bg colors. I guess you could just add CSS attribs or something.
|
Boudga
Maniac (V) Mad Scientist
From: Jacks raging bile duct....
Insane since: Mar 2000
|
posted 08-22-2002 06:29
Welcome Andy_J!
That's a heckuva first post! Thanks a lot, I'll give it a whirl!
|
andy_j
Nervous Wreck (II) Inmate
From: uk
Insane since: Aug 2002
|
posted 08-22-2002 06:33
Thanks for the welcome 
|
Bugimus
Maniac (V) Mad Scientist
From: New California
Insane since: Mar 2000
|
posted 08-22-2002 08:14
Very nice script, andy_j. I would like to welcome you too.
I would suggest adding a 1px border to the colored cells to make it really look like that old continuous feed paper. I used to use a lot of that greenbar paper. I remember it well.
You can add a line to andy_j's code for the border color of the cells like:
ele.cells[x].style.border="1px solid #99cc99";
 . . : slicePuzzle
|
Boudga
Maniac (V) Mad Scientist
From: Jacks raging bile duct....
Insane since: Mar 2000
|
posted 08-22-2002 08:41
much grass Bugs!
|
andy_j
Nervous Wreck (II) Inmate
From: uk
Insane since: Aug 2002
|
posted 08-22-2002 09:07
Thanks for the welcome, much appreciated
|
Petskull
Maniac (V) Mad Scientist
From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000
|
posted 08-22-2002 16:16
damn it! I thought this thread was dead!....ok, ok... I made this after kuckus's "try 'rows[0]" post:
<HTML>
<HEAD>
<TITLE>Table Games (08.19.02)</TITLE>
<SCRIPT language="Javascript">
// document.body.childNodes.3.childNodes.0.rows.0.bgColor =
function chhead(){
var i=0;
for (i=0; document.getElementById("myTable").rows[i]; i=i+2)
{
tab = document.getElementById("myTable").rows[i];
tab.bgColor = "\#336699";
}
}
</SCRIPT>
<style type="text/css">
a {color:#8080FF;text-decoration:none}
a:hover {color:#D7E0F7;text-decoration:none}
body {background-color:#000000;}
TD {color:#00FF00;text-decoration:none}
</style>
</head>
<body onload="chhead();">
<TABLE width=95% border=1 ID="myTable">
<TR><TD>Lorem Ipsum...</TD></TR>
<TR><TD>Lorem Ipsum...</TD></TR>
<TR><TD>Lorem Ipsum...</TD></TR>
<TR><TD>Lorem Ipsum...</TD></TR>
<TR><TD>Lorem Ipsum...</TD></TR>
<TR><TD>Lorem Ipsum...</TD></TR>
<TR><TD>Lorem Ipsum...</TD></TR>
<TR><TD>Lorem Ipsum...</TD></TR>
<TR><TD>Lorem Ipsum...</TD></TR>
</TABLE>
</body>
</html>
here- you only hafta put the 'ID="myTable"' in the table you want to affect...
Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342
|
Pugzly
Paranoid (IV) Inmate
From: 127.0.0.1
Insane since: Apr 2000
|
posted 08-22-2002 17:07
Which spawns a more portable version, in case you have multiple tables:
<html>
<head>
<title>Table Games (08.22.02)</title>
<script type="text/javascript" language="Javascript">
function chhead(tablename, tablecolor){
var i=0;
for (i=0; document.getElementById(tablename).rows[i]; i=i+2){
tab = document.getElementById(tablename).rows[i];
tab.bgColor = tablecolor;
}
}
</script>
<style type="text/css">
a {color:#8080FF; text-decoration:none}
a:hover {color:#D7E0F7; text-decoration:none}
body {background-color: #000000;}
td {color:#00FF00; text-decoration:none}
</style>
</head>
<body onload="chhead('myTable','#336699');chhead('mytable2','#ffcc00');">
<table width="95%" border="1" ID="myTable">
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
</table>
<br /><br />
<table width="95%" border="1" ID="myTable2">
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
<tr><td>Lorem Ipsum...</td></tr>
</table>
</body>
</html>
|
Petskull
Maniac (V) Mad Scientist
From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000
|
posted 08-22-2002 17:09
....fucking bastard...always one-upping me......
Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342
|
Bugimus
Maniac (V) Mad Scientist
From: New California
Insane since: Mar 2000
|
posted 08-22-2002 22:45
Ah yes and now we see how competition can benefit us all.
. . : slicePuzzle
|
Pugzly
Paranoid (IV) Inmate
From: 127.0.0.1
Insane since: Apr 2000
|
posted 08-22-2002 23:38
Actually, stuff like this helps me deal with 'syntax disorder'...... 
|
Boudga
Maniac (V) Mad Scientist
From: Jacks raging bile duct....
Insane since: Mar 2000
|
posted 08-23-2002 02:23
I suffer from Syntax Disorder...it's quite debilitating!
|
Shak
Obsessive-Compulsive (I) Inmate
From:
Insane since: Jun 2003
|
posted 06-20-2003 00:56
Hey guys..
Sorry to bring this topic from the dead, but i have a question maybe you guys can help me out with.
I am using this script made by petskull, and i ran into a problem. I found out that the alternating TR's only work in one table in one page that is using that id. Is it possible for me to use the id over and over in multiple tables? I am making a skin for a forum that produces multiple tables from one main table.
Any recommendations?
Thanks alot, this code has solved my previous problem
http://aquaxp.com/
|
quisja
Paranoid (IV) Inmate
From: everywhere
Insane since: Jun 2002
|
posted 06-20-2003 18:26
Each ID is unique to one element in any given document. Assigning two elements the same ID will not work. If you're using a forum then it might well be a lot easier to do it server-side, since that's how the forum will be coded anyway. If you have no knowledge of server side languages then that might not be viable though...
Another option would be to put the ids of each element into an array and then loop through it, calling the function for each ID. Again, naming each array separately might not be possible with what you're doing...
Ohh, brainwave, would it work if you did something like:
code:
for(i=0;i<document.tables.length;i++) {
coloringfunction(document.tables[i].id)
}
Since document.tables would be an array of all the tables on the page? That was just a wild guess by the way...
|
Shak
Obsessive-Compulsive (I) Inmate
From:
Insane since: Jun 2003
|
posted 06-20-2003 18:45
Hmm pardon my knowledge in this field but exactly what part of the code will i replace with that?
You can check sample of this work at http://shak.us/test.html
http://aquaxp.com/
|
quisja
Paranoid (IV) Inmate
From: everywhere
Insane since: Jun 2002
|
posted 06-20-2003 19:58
Actually, sorry about that, I played around with it some more, and I'm not sure that there is a document.tables array any more. So unless anyone knows anything to the contrary, then that wont work.
Hmmm. Doesn't seem to be working with document.getElementsByTagName() either...
[This message has been edited by quisja (edited 06-21-2003).]
|
Pugzly
Paranoid (IV) Inmate
From: 127.0.0.1
Insane since: Apr 2000
|
posted 06-21-2003 16:01
Here's how I do it in PHP. Maybe you can adapt this:
code:
function is_even($num){
return ($num&1)?0:1;
}
echo (is_even($tr)?'<tr bgcolor="#f0f0f0">':'<tr bgcolor="#ffffff">');
$tr++;
|
