alternating row colors using html

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

I understand the concept, but not how to execute it. My data come from a table whose records are constantly changing. I never know how many rows there will be. So basically I'm not sure how to add your suggestion to my code (above). It must be more than simply copying and pasting it in there, right?

can you point me to a live site to view how the table is being generated?

ASKER

The table is part of a SQL database. I am using an application that sends sales order confirmations to customers after their orders have been entered into the database. The app pulls the proper records and presents them using html code. There isn't a live site I can lead you to.

OK this should work for you:

disregard what I said above, and add this to your css.

td.mytable(even)
{
font-size:10pt;
background-color:white;
color:black;
border-style:solid;
border-width:1px;
border-color:cccccc;
text-align:left;
padding:2px;
}

td.mytable(odd)
{
font-size:10pt;
background-color:black;
color:white;
border-style:solid;
border-width:1px;
border-color:cccccc;
text-align:left;
padding:2px;
}

and you should be good to go on generated tables.

Hope that helps

FDM

Shoot, upon doing further research on this topic I realized this technique is not going to work.

If you cannot apply the different styles try using javascript.

Here is a good example

http://www.alistapart.com/articles/zebratables/

ASKER

I looked at that site earlier today and it is more than I can digest. Remember that I am a beginner.

unfortunately javascript is going to be your only option if you are unable to change the class names.

Hi,

Try this script

function alternate(id){
 if(document.getElementsByTagName){  
   var table = document.getElementById(id);  
   var rows = table.getElementsByTagName("tr");  
   for(i = 0; i < rows.length; i++){          
 //manipulate rows
     if(i % 2 == 0){
       rows[i].className = "even";
     }else{
       rows[i].className = "odd";
     }      
   }
 }
}

Open in new window

And then use this css

tr.even
      {  
            font-size:10pt;
            background-color:white;
            color:black;
            border-style:solid;
            border-width:1px;
            border-color:cccccc;
            text-align:left;
            padding:2px;
      }

      tr.odd
      {  
            font-size:10pt;
            background-color:black;
            color:white;
            border-style:solid;
            border-width:1px;
            border-color:cccccc;
            text-align:left;
            padding:2px;
      }

Open in new window

And Try this also. This is done by using JQuery

See the attachment

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <script src="jquery.js"></script>
  <script> 
  $(document).ready(function()
  {
	  $("tr:even").css("background-color", "#F4F4F8");
	  $("tr:odd").css("background-color", "#EFF1F1");
  });
  </script>
</head>
<body>
Examples with tables<br><br>
<table border="1">
    <tr><td>Test1</td></tr>
    <tr><td>Test2</td></tr>
    <tr><td>Test3</td></tr>
    <tr><td>Test4</td></tr>
 </table>

</body>
</html>

Open in new window

Odd-Even.zip

ASKER

techsathish, I tried both of your suggestions, and they did not work, but it could very well be I am not putting the code in the correct place. Could you edit the code I supplied as you think it should be and I will try it? Thank you.

Hi,

Okay fine, Can u post your full code with the css. i ll alter that and then give it to u...

ASKER

Yes, thank you. This is the entire code:

<style type='text/css'>
      caption.mytable
      {
            background-color:99CCFF;
            color:black;
            border-style:solid;
            border-width:1px;
            border-color:336699;
            text-align:center;
      }

      table.mytable
            {
            font-family:Tahoma;
            border-collapse:collapse;
            font-size:10pt;
            background-color:white;
            width:100%;
            border-style:solid;
            border-color:336699;
            border-width:1px;
      }

      th.mytable
      {
            font-size:10pt;
            color:black;
            text-align:center;

      }

      tr.mytable
      {
      }

      td.mytable
      {
            font-size:10pt;
            background-color:white;
            color:black;
            border-style:solid;
            border-width:1px;
            border-color:cccccc;
            text-align:left;
            padding:2px;
      }
</style>

<img src="C:\Documents and Settings\Rick\My Documents\Exact\Event Manager\MAX logo.jpg" width="100" height="100"/>

<div class="boxed">
<div class="header"><br>Dear {CONTACT},<br>
<br>
Thank you for your recent order. Your order number is {ORDER}. Below are the details of the order you placed on {ORDER_ENTRY_DATE}. Thank you for your business.<br>
<br>
</div>

<table class='mytable'>

      <thead>
            <tr class='mytable'>
                  <th class='mytable'>Line</th>
                  <th class='mytable'>Del</th>
                  <th class='mytable'>Qty</th>
                  <th class='mytable'>Part Number</th>
                  <th class='mytable'>Description</th>
                  <th class='mytable'>Unit Price</th>
                  <th class='mytable'>Ext'd Price</th>
                  <th class='mytable'>Due Date</th>
            </tr>
      </thead>
      <tbody>
            {BEGIN*REPEAT}
            <tr class='mytable'>
                  <td class='mytable'>{Line}</td>
                  <td class='mytable'>{Delivery}</td>
                  <td class='mytable'>{Current_Qty}</td>
                  <td class='mytable'>{Part_Number}</td>
                  <td class='mytable'>{Description}</td>
                  <td class='mytable'>{Unit_Price}</td>
                  <td class='mytable'>{Extended_Price}</td>
                  <td class='mytable'>{Due_Date}</td>
            </tr>
            {END*REPEAT}
      </tbody>
</table>

Hi ginsburg7,

in ur code where ur using head and body. For using JQuery need head part

ASKER

I feel like I'm being difficult, but I'm really not. I posted all the code there is. Maybe the lack of a head and body explains why this has been so difficult for me to figure out. Can we simply create a head section?

Hi,

Sorry am not having that much knowledge in oracle codes. See the attached file

Odd-Even.zip