Log in

View Full Version : Is it possible to use css to Alternate Row colors?


kuau
08-05-2008, 05:47 AM
I'm wondering if there exists yet an elegant method of using css to alternate row background colors. I know how to do it a few ways with tables but I am not fond of tables. I did Google it, but found nothing useful.

Any one out there solved this problem yet? Thanks. :)

PS. remember back when all search results had a "Last Updated" date on the websites? What happened to those dates? I found them very useful, but they just suddenly vanished, and on most sites there is no mention of when the info came out. You have to really dig for any indication of when something was written. This is a pet peeve of mine.
allahverdi
08-05-2008, 06:40 AM
I don't know with css.

What about to give classes to divs?

One of the examples is WordPress. Look at the comments. Some of them are classed, with 1,2 and etc. Then it gets, odd and even numbers.
rangana
08-05-2008, 07:50 AM
I doubt we're on the same boat, I believe this ain't what you mean:

<style type="text/css">
.odd{background:#ffe;}
.even{background:#eee;}
</style>
<ul>
<li class="odd">Odd</li>
<li class="even">Even</li>
<li class="odd">Odd</li>
<li class="even">Even</li>
<li class="odd">Odd</li>
<li class="even">Even</li>
<li class="odd">Odd</li>
<li class="even">Even</li>
<li class="odd">Odd</li>
<li class="even">Even</li>
</ul>


If it really is'nt what you're after for, please do rephrase.
jscheuer1
08-05-2008, 01:40 PM
That's good rangana, but even divs will do nicely:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.odd{background:#ffe;}
.even{background:#eee;}
</style>

</head>
<body>
<div class="odd">Odd</div>
<div class="even">Even</div>
<div class="odd">Odd</div>
<div class="even">Even</div>
<div class="odd">Odd</div>
<div class="even">Even</div>
<div class="odd">Odd</div>
<div class="even">Even</div>
<div class="odd">Odd</div>
<div class="even">Even</div>
</body>
</html>

However kuau, if you need columns in those rows, getting them to line up vertically can be difficult. But that's what tables generally are for, especially if you are presenting tabular data, like dates and times with event names or items with their prices and descriptions, that sort of thing.

The biggest problem with tables are their drag on page load times. A well constructed table that accurately sets the width of its columns with the very first row, and has its:


table {
table-layout: fixed;
}

set in the stylesheet will not have this problem.
kuau
08-05-2008, 04:12 PM
Thanks! Oh, I thought it was bad form to use tables except to display spreadsheet-type data. So then, what is considered the best way to alternate rows in a table? I have seen it done with if statements, and also with ternary operators, and also with td definitions. I would really appreciate your (definitive) opinion.

In the above examples of doing it with css, what if you don't know how many rows there will be? My particular application seems to always be presenting varying amounts of data through a while loop. Sometimes I don't need columns.

Thank you very much.

Also is there a summary somewhere of what the symbols mean in query strings (eg. %3 etc). Its hard to find things when you don't know what they're called.
jscheuer1
08-05-2008, 04:47 PM
Using css is best because you can later change the style for the classes without editing your script. If your tables are being generated by a script, there are probably numbers involved that could be used to determine the class name of each row, or you could do a toggle (something like):


var cn = 'odd'
something here that sets up a loop to write out the rows {
write a row with class="' + cn + '"
var cn = cn == 'odd'? 'even' : 'odd';
}

It would be similar in PHP, you would just need to use the proper syntax.

To be more specific I would need to see the code that generates the rows.

As to the other question, there would almost never be a %3 in a query, perhaps a %3e, or %3E, or %20 - that one's really common, it's a space.

The % sign just means that the next two characters make up a hex code that corresponds to the character being escaped (certain characters don't do well in URLs). If you had a chart of characters with their hex codes, that would tell you. Generally you don't need to know, they just represent characters that are in the link. You can always decipher any given one by making up a little script, ex:


alert(unescape('%3e'));

Here's a fairly good table of hex (and other, use the hex column) codes for common characters:

http://en.wikipedia.org/wiki/ASCII#ASCII_printable_characters
kuau
08-05-2008, 10:04 PM
Well, here is my code, but for some reason the drop-down list doesn't seem to produce the right day except the first time:


$today = date ('Y-m-d');
if(isset($_GET['startdate']) && $_GET['startdate'] != ''){
$day = date('w',strtotime($_GET['startdate']));
} else {
$day = date('w',strtotime($today));
}
?>
<div id="ongoing">
<form action="/php/ongoing-new2.php" method="GET" name="SelectDay" class="datedrop">
<span class="h1">ONGOING EVENTS For: </span> &nbsp; <select name="day" onChange="document.SelectDay.submit()" class="datedrop">
<option value=1 <?php if ($_GET['day'] =="1"){ echo " selected"; } ?> >MONDAY </option>
<option value=2 <?php if ($_GET['day'] =="2"){ echo " selected"; } ?> >TUESDAY </option>
<option value=3 <?php if ($_GET['day'] =="3"){ echo " selected"; } ?> >WEDNESDAY </option>
<option value=4 <?php if ($_GET['day'] =="4"){ echo " selected"; } ?> >THURSDAY </option>
<option value=5 <?php if ($_GET['day'] =="5"){ echo " selected"; } ?> >FRIDAY </option>
<option value=6 <?php if ($_GET['day'] =="6"){ echo " selected"; } ?> >SATURDAY </option>
<option value=0 <?php if ($_GET['day'] =="0"){ echo " selected"; } ?> >SUNDAY </option>
</select> &nbsp; <input type="submit" value=" GO ">
</form>
<?php
$sql = "SELECT DISTINCT event.event_id, ev_title, description, loc_id FROM event, recur WHERE event.event_id = recur.event_id
AND recur.`dayofweek` = '".$day."' AND event.ongoing > 0 ORDER by ev_title ";
$result = mysql_query($sql,$connection) or die("Couldn't execute $sql query. <br> mysql error: ".mysql_error());
while ($row = mysql_fetch_array($result))
{
$event_id = $row[event_id];
$ev_title = $row[ev_title];
$description = $row[description];
$desc = substr($description, 0, 123);
$loc_id = $row[loc_id]; ?>
<a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>"><?php echo $ev_title; ?></a><br>
<?php echo $desc; ?>...<a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>">More</a><br>
<?php } ?>
</div><!--end ongoing


I could even live without the alternating rows if the code would just work reliably. Thanks very much.

Thanks for the info about the hex codes...that clears up a lot of mysteries for me.
jscheuer1
08-06-2008, 03:38 AM
Something like:


<?php
$cn = "odd";
$sql = "SELECT DISTINCT event.event_id, ev_title, description, loc_id FROM event, recur WHERE event.event_id = recur.event_id
AND recur.`dayofweek` = '".$day."' AND event.ongoing > 0 ORDER by ev_title ";
$result = mysql_query($sql,$connection) or die("Couldn't execute $sql query. <br> mysql error: ".mysql_error());
while ($row = mysql_fetch_array($result))
{
$event_id = $row[event_id];
$ev_title = $row[ev_title];
$description = $row[description];
$desc = substr($description, 0, 123);
$loc_id = $row[loc_id]; ?>
<div class="<?php echo $cn; ?>"><a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>"><?php echo $ev_title; ?></a><br>
<?php echo $desc; ?>...<a href="/php/event-detail.php?event_id=<?php echo $event_id; ?>">More</a></div>
<?php
if ($cn == "odd")
$cn = "even";
else
$cn = "odd";
}
?>
kuau
08-06-2008, 09:29 AM
Dear John: That worked perfectly... and no tables! Exactly what I wanted ... thanks so much. You are the best. :)
rd42
10-20-2008, 12:18 AM
I've been looking for a solution like this and this has to be the most elegant yet. So much so that I registered just to say thanks.

Thanks! :D

Robert
TheJoshMan
10-20-2008, 12:20 AM
I've been looking for a solution like this and this has to be the most elegant yet. So much so that I registered just to say thanks.

Thanks! :D

Robert


That is refreshing rd42... Most people would've simply just taken the solution and ran! LOL

Nice to see someone break free of the masses.
Medyman
10-20-2008, 07:54 PM
For the experimental, you could also do this with nth-child selectors. Of course, there is minimal support for these at the moment.

Just something to look forward to.