dynamic table row bgcolor

Forum Moderators: not2easy

Message Too Old, No Replies

dynamic table row bgcolor

how to do it?

ayushchd

4:53 pm on May 23, 2007 (gmt 0)

hey
how can i define the class of a table such that after every alternate row, the bgcolor of the row changes...

for eg:

bgcolor :::::::::::: row.no
white 1
grey 2
white 3
grey 4
white 5
grey 6

Fotiman

5:58 pm on May 23, 2007 (gmt 0)

This should get you started.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
<title>Table Row Colors</title> 
<style type="text/css"> 
tr.odd { background-color: #fff; } 
tr.even { background-color: #ccc; } 
</style> 
</head> 
<body> 
<table> 
  <tr class="odd"><td>Row 1</td></tr> 
  <tr class="even"><td>Row 2</td></tr> 
  <tr class="odd"><td>Row 3</td></tr> 
  <tr class="even"><td>Row 4</td></tr> 
  <tr class="odd"><td>Row 5</td></tr> 
</table> 
</body> 
</html>

Robin_reala

6:20 pm on May 23, 2007 (gmt 0)

It's worth pointing out that CSS3 does this natively although very few browsers support this yet (only Konqueror?):

tr { background-color: gray; }
tr:nth-child(even) { background-color: white; }

Xapti

6:21 pm on May 23, 2007 (gmt 0)

tr:nth-child(2n+1) represents every odd row
tr:nth-child(odd) same as above

tr:nth-child(2n) represents every even row
tr:nth-child(even) same as above

I don't think it's supported in many browsers though, most importantly IE.
Therefore, to dynamically do this, you'd probably use some Javascript.

edit:looks like Robin posted a minute quicker than I.

[edited by: Xapti at 6:22 pm (utc) on May 23, 2007]

ayushchd

6:30 pm on May 23, 2007 (gmt 0)

$a = "select * from shares where user = '". $_COOKIE['user']."';";
$ab = mysql_query($a);
$abc = mysql_numrows($ab);

?>
<link type="text/css" rel="stylesheet" href="css.css">
<div class="querywhite">
<fieldset><legend>Your Shares Information</legend>
<table width="100%" class="shares">
<tr bgcolor="#717593">
<td height="21"> 
Company
<div align="center"/>
<div align="center"/>
</td>
<td> Date
<div align="center"/> </td>
<td> 
Quantity
<div align="center"/>
<div align="center"/> </td>
<td> Purchase Price
<div align="center"/> </td>
<td> 
Total Transaction Value
<div align="center"/>
<div align="center"/> </td>
<td> Bookerage
<div align="center"/> </td>
<td> 
Pmt
<div align="center"/>
<div align="center"/> </td>

</tr>
</div>
<div class="queryblack">
<tr bgcolor="#FFFFFF">
<?
while ($row = mysql_fetch_assoc($ab)) {
$query= "select * from listedcomp where company='" . $row['company'] . "'";
$result = mysql_query($query);
$rows = mysql_fetch_assoc($result);
$shares = $rows['shares'];

$closing = $rows['closing'];
$qty = $row['quantity'];
$curdate = date("F j, Y");
$value = $closing * $qty;
$book = $value * 0.01;
$pmt_amt = $value + $book;
?>
<td height="21"> <div align="center" class="queryblack"/>  <? echo $row['company'];?>
</td>
<td> <div align="center" class="queryblack"/>  <? echo $row['date'];?>
</td>
<td> <div align="center" class="queryblack"/>  <? echo $row['quantity'];?>
</td>
<td> <div align="center" class="queryblack"/>  <? echo $row['closing'];?>
</td>
<td> <div align="center" class="queryblack"/>  <? echo $row['transaction'];?>
</td>
<td> <div align="center" class="queryblack"/>  <? echo $row['bookerage'];?>
</td>
<td> <div align="center" class="queryblack"/>  <? echo $row['pmt'];?>
</td>
</tr>
<tr bgcolor="#FFFFFF">

</div>

<? }?>

This is what i have...i want the bgcolor to change according to the mysql query