Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

is there a way to make zebra table without if? 1

Status
Not open for further replies.
iamsw00sh

iamsw00sh

Programmer
May 21, 2003
92
RO
i mean like

- white tr
- red tr
- white tr
- red tr

...

is there a class for this? or I always have to "if" the data (server side or client side) and check if odd/even
...

thanks

 
Sort by date Sort by votes
So, to clarify..

you want to set alternate rows as different colours but don't want to use a method to determine which colour to make them?

Um... in that case. No.
The very nature of the problem means that you will, at some point, have to work out which colour to apply to the row.
The logical way to do this is to determine if it's "odd" or "even".

"I'm making time
 
Upvote 0 Downvote
Actually as a cheat... not sure if this will work but..


Make a striped background graphic and apply that to your table using CSS.
Then make all the cells in the table transparent.

I have no time to test it... if it works, can you let me know.

"I'm making time
 
Upvote 0 Downvote
Yes an image.
Make a striped graphic and apply it to the background of the table element using CSS.

Define a class for the table
Code: 
table.stripes { background:url(myStripes.gif); }

Apply the class to the table
Code: 
<table class="stripes">

Like that.

The only problem I can see is that you will need to fiddle to get the width of the stripes right. Then you have the issue if making sure the stripes line up and that no cell goes over 1 line etc.

The DOM scripted way is better, but this cheat should work to some degree.





"I'm making time
 
Upvote 0 Downvote
And intimidate your users enough not to change font sizes, which will consequently break this design cheat. Nothing with zebra stripes beats server side solution if you ask me. I don't really understand what is bothering you with ifs.
 
Upvote 0 Downvote
Me too. Resize/shrink browser window and zebra loses his stripes. Cheap paint. :)

If server-side is not feasible (lotsa copy&paste code for example) personally I'd try with javascript. This script from alistapart.com is OK... it only needs some upgrades - to work with styles and modify all tables with specified class name at once.

One day... CSS3:

.zebra tr:nth-child(odd){ background-color: lime; }
.zebra tr:nth-child(even){ background-color: pink;}
 
Upvote 0 Downvote
In progress since 2001 :(. Actually this zebra stuff was one of first proposed (structural pseudo-classes).

Implementation in browsers: zero, I think.

 
Upvote 0 Downvote
don't hold your breath on CSS3 Guys, A certain browser (only the most popular) can't manage CSS1 100% correctly yet [smile]

Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
I have tried to use the zebra striping on a test page I have for a site I do for a local darts league. Unfortunately, I also have a javascript menu which seems to conflict with the stripes.


I'm working on a rehash of it but am lousy at javascript,so it will be hard going

Harleuqeen
 
Upvote 0 Downvote
I was actually thinking about something like this:
Code: 
<html>
<head>
	<script language="javascript" src="makeZebras.js"></script>
	<link rel="stylesheet" type="text/css" href="myStyle.css">
	...
</head>
<body onload="makeZebras('zebra', 'odd', 'even');">
...
Sample myStyle.css:
Code: 
.zebra {		background-color: #dedede; }
.zebra .odd { background-color: #ffcb3a; }
.zebra .even { background-color: #6693a0; }
... and file makeZebras.js:
Code: 
function makeZebras( sTableClass, sOddClass, sEvenClass )
{	var oTables = document.getElementsByTagName( "TABLE" );

	for( i=0; i< oTables.length; i++ )
		if( (oTab = oTables[i]).className== sTableClass )
			for( oTBodies = oTab.tBodies, j=0; j< oTBodies.length; j++ )
				for( oRows = oTBodies[j].rows, k=0, even=false; k< oRows.length; k++, even=!even )
					with ( oRows[k] )
					{	if(!even && sOddClass ) className=sOddClass;
						if( even && sEvenClass) className=sEvenClass;
					}
}
Basically it searches entire page for all tables with class="zebra", then dynamically assigns cascades to odd/even rows.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
767
bdwilcox
bdwilcox
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
780
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
238
Alt255
Alt255
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top