14 replies [Last post]
simbala
Offline
Enthusiast
Last seen: 14 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

I have a table element with close to 200 rows to be displayed. I want each row to alternate in color..in ohter words..I want to define two colors fro odd and even numbered rows. How can I accomplish this.

Thanks.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 3 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Aplying different colors to odd and even rows

Is this data coming from a DB?
If so, I have an asp/css solution.

simbala
Offline
Enthusiast
Last seen: 14 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

Aplying different colors to odd and even rows

Yes they are coming from a DB and the type of pages I am writing are java server pages.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Aplying different colors to odd and even rows

Include a class on each row in your output generation. Toggle the class from row to row - either to a different class on no class.

e.g. in php (other languages will require something similar in their own syntax)...

$class = "even";
foreach ($table as $row) {
  $class = ($class=='even') ? 'odd' : 'even';

  print "<tr class='$class'>
  // the rest of your row output
  print "</tr>";
}

then your css will have

tr.odd { background-color: red; }
tr.even { background-color: blue; }

or perhaps tr.odd td { background-color: green; }

Potentially, you could use some unobtrusive javascript to do the same thing, however I reckon since you are generating the html in the first place, it shouldn't be too difficult to add an extra class or two.

jlhaslip
Offline
Enthusiast
Last seen: 11 years 22 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Aplying different colors to odd and even rows

Here if the php code I use to alternate row colours:

while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
	if ($row % 2) { $data_string .= '<tr class="hi_lite"> ';
	}
	else  { $data_string .= '<tr> ';

--   add the rest of the stuff to the data string and then print it
 
	}

If the row number is evenly dividible by '2', apply a class defined in the css which alters the background and colour for the row, otherwise, no class is applied to the row.
JSP should have a similar capability. (?)

I'm having a good day...so far.

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 6 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

Aplying different colors to odd and even rows

jlhaslip

Though your code is functionally correct, I would vouch the former method by Chris, for the reason that modulo (%) is computationally expensive.

Hope this helps

tech

jlhaslip
Offline
Enthusiast
Last seen: 11 years 22 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Aplying different colors to odd and even rows

Good point. I'm changing my script.
Thanks for commenting on this topic.

I'm having a good day...so far.

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 6 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

Aplying different colors to odd and even rows

In fact an even faster script would make use of booleans rather than strings to compare:

$class = FALSE;
foreach ($table as $row) {
  print "<tr class='" . ($class ? "even" : "odd") . "'>";
  // the rest of your row output
  print "</tr>";
  $class = !($class);
} 

If anyone will be using this, please let us know if the timings work out to be favorable.

Hope this helps

tech

jlhaslip
Offline
Enthusiast
Last seen: 11 years 22 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Aplying different colors to odd and even rows

AWWWWW! Now I have to change it once more???

I'm having a good day...so far.

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 6 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

Aplying different colors to odd and even rows

As far as I can see there are 3 methods that come to mind when considering performance:

1. Boolean based: see my post

2. Numerical based and would look something like this:

 $class = 0;
foreach ($table as $row) {
  print "<tr class='" . ($class == 0) ? "even" : "odd") . "'>";
  // the rest of your row output
  print "</tr>";
  $class = 1-$class;
}

3. String based: see post by Chris

My guess is that the order given is also the order of execution speed. If more than from about 1000 rows are involved a performance distinction becomes visible. Either way, the use of foreach is favored over for( ; ; ) for its performance.

Hope this helps

tech

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 24 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Aplying different colors to odd and even rows

There's a regular expression solution (php here) which is sometimes faster
(with the computed $str -
$str="<table>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
</table>";
):
preg_replace("/((<tr>.*?<\/tr>[^<]*<tr)(>.*?<\/tr>))/s", "$2 class=\"odd\"$3", $str);

simbala
Offline
Enthusiast
Last seen: 14 years 27 weeks ago
Timezone: GMT-5
Joined: 2006-04-20
Posts: 54
Points: 0

Aplying different colors to odd and even rows

I appreciate the commens on this. Is there a way to do this using JSP or JSTL tags.Does anyone know?

Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 11 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Aplying different colors to odd and even rows

Just to throw an extra ingredient into the mix, you can do this with javascript. The advantage with js is that you can also use it to resort the table based on the field, hi-liting the column on which the sort is based.

Check this sorted table demo. The posted demo is a static instance of the PHP/MySQL original. Clicking on any header will re-sort the table on that column. Re-clicking will reverse the sort. Rows are zebra striped and a re-sort will re-stripe the rows.

If I can generate enough energy, I may do this again for the 2006 season. I don't mind collecting the data on each team possession, it's semi-automated and only takes about 20–25 minutes per week to grab and enter into the db the ≈350 possessions per week. It's building the schedule db table that gets me. I really need to script that somehow. :?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jlhaslip
Offline
Enthusiast
Last seen: 11 years 22 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Aplying different colors to odd and even rows

I think the script is broken. The Lions keep coming out as 32 nd place in a lot of the Offence stats. I think they are quite offensive most days.

I'm having a good day...so far.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Aplying different colors to odd and even rows

I expect you are quite right about timings of the different methods. I'd reckon though that none of the three methods mentioned would have a significant impact on the total page generation time. Outputing 1000+ rows sourced from a db would overwhelm any differences in determining the class.

I'd go with a solution which made the code easiest to read and maintain, thats why I tend to prefill individual variables like $class.

<tr $class> or <tr class='$class'>

are neat and obvious.

I'd also tend to use a class for both odd and even rows rather than class and no class, unless you are certain your no class is to be a default (plain) styling. It saves any style overrides if you find yourself with multiple tables on the same page. Overriding styles clutters up a style sheet and can very quickly make a style sheet disorganised and difficult to follow.

If you're happy having the table handled in javascript, also take a look at some of the toolkits. You should find table widgets able to do the things described by kk5st.