Alternate the row color of table

am

amuroamuro 20 Oct, 2008

Hi!
I facing some problem (From my requirement🤣 ), I try & read in the forums but can't find anything that help me, that ploblem is...
How to alternate the row color of table that display my data. I think CSS can not help for this, maybe php or some thing but have not those knowledge.

Max_admin 20 Oct, 2008

Hi amuroamuro,

its a PHP and CSS, to change the color then you need to have different class per row, now its time to CSS to color those different classes!

e.g: class="row<?php echo $i; ?>"

Cheers,
Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

ah

ahannover 29 Oct, 2008

I just did this, so I might be able to share some light on this for newbies like me, even though it's not really a ChronoConnectivity question.
I personally love examples so here goes.

Add this in header:


<?php
$i = 0;
?>

Add this in body:
I added it in my table row element<tr> (I use tables to format layout). It gives you alternating white or light grey lines.
In table row element use

<tr<?php if ($i % 2) echo ' style="background-color: #EBEBEB;"';?>>

Add this to body:
Put it as the last line.


<?php $i++ ?>

Here is the complete example of my implementation.

Header:


<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <title></title>
</head>
<body>
<h2 style="color: rgb(0, 51, 0);">This is the IT
Operations production events log</h2>
<table
 style="text-align: left; width: 100%;"
 border="0" cellpadding="2" cellspacing="0">
  <tbody>
    <tr style="background-color: rgb(204, 204, 204)";>
      <td style="font-weight: bold; width: 3%;">ID# </td>
      <td style="font-weight: bold; width: 7%;">Date           </td>
      <td style="font-weight: bold; width: 4%;">Time  </td>
      <td style="font-weight: bold; width: 21%;">Device/Server/System</td>
      <td style="font-weight: bold; width: 15%;">Customers
affected</td>
      <td style="font-weight: bold; width: 40%;">Action</td>
      <td style="font-weight: bold; width: 10%;">Name of
implementor</td>
    </tr>
  </tbody>
</table>
</body>
</html>

<?php
$i = 0;
?>

Body:


<table style="text-align: left; width: 100%;" border="0"
 cellpadding="2" cellspacing="0">
  <tbody>
    <tr<?php if ($i % 2) echo ' style="background-color: #EBEBEB;"';?>>
      <td style="font-weight: bold; width: 3%;">{cf_id}</td>
      <td style="font-weight: bold; width: 7%;">{date_0}</td>
      <td style="font-weight: bold; width: 4%;">{time_1}</td>
      <td style="font-weight: bold; width: 21%;">{system_1}</td>
      <td style="font-weight: bold; width: 15%;">{customer_1}</td>
      <td style="font-weight: bold; width: 40%;">{action_1}</td>
      <td style="font-weight: bold; width: 10%;">{name_1}</td>
    </tr>
  </tbody>
</table>
<?php $i++ ?>

regards
Anders

Gr

GreyHead 29 Oct, 2008

Hi ahannover,

Useful post - thank you. There's a slightly simpler way of doing this that you might like to try. Instead of using $i = $i +1 and checking for the odd or even values you can use $i = 1-$i - this means that $i alternates between 1 and 0 (try it to see!).

You can then use this to set classes

<php echo "class='row_$i'; ?>

and set the row colours in your css

tr.row_0 { background-color:silver; }
tr.row_1 { background-color:white; }

Bob

am

amuroamuro 31 Oct, 2008

Hi!

That work!
Thank you very much for all of your advice😀

To

Tobiasgar 25 Aug, 2011

You can use nth-child(odd/even) selectors however not all browsers (ie 6-8, ff v3.0) support these rules hence why most solutions fall back to some form of javascript/jquery solution to add the classes to the rows for these non compliant browsers to get the tiger stripe effect.😀