?
Solved

alternating row colors using html

Posted on 2010-01-05
18
Medium Priority
?
421 Views
Last Modified: 2012-05-08
I am trying to get alternating row colors in the following html code.  I am brand new to html, so please be gentle.  Here is my 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>

<div class="boxed">
  <div class="header">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>
0
Comment
Question by:ginsburg7
  • 7
  • 6
  • 5
18 Comments
 
LVL 9

Accepted Solution

by:
FDMilwaukee earned 2000 total points
ID: 26185727
ginsburg7,

Here's how you can get an alternating row color.

1)  Change every other class='mytable' to class='mytable1'

2)  Create a new style rule for mytable1:
            .mytable1
            (font-size:10pt;
            background-color:black; <-------------- changed the background color
            color:white; <----------------------------- also changed the text color for readability
            border-style:solid;
            border-width:1px;
            border-color:cccccc;
            text-align:left;
            padding:2px;
           }

Note:  as you can I see I just copy and pasted the mytable class style and changed the bg color and text color.

Now you will have alternating colors in your table.

Hope that helps

FDM
0
 

Author Comment

by:ginsburg7
ID: 26185886
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?
0
 
LVL 9

Expert Comment

by:FDMilwaukee
ID: 26185896
can you point me to a live site to view how the table is being generated?
0
Transaction-level recovery for Oracle database

Veeam Explore for Oracle delivers low RTOs and RPOs with agentless transaction log backup and transaction-level recovery of Oracle databases. You can restore the database to a precise point in time, even to a specific transaction.

 

Author Comment

by:ginsburg7
ID: 26185923
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.
0
 
LVL 9

Expert Comment

by:FDMilwaukee
ID: 26185981
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
0
 
LVL 9

Expert Comment

by:FDMilwaukee
ID: 26186138
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/

0
 

Author Comment

by:ginsburg7
ID: 26186178
I looked at that site earlier today and it is more than I can digest.  Remember that I am a beginner.
0
 
LVL 9

Expert Comment

by:FDMilwaukee
ID: 26186264
unfortunately javascript is going to be your only option if you are unable to change the class names.
0
 
LVL 7

Expert Comment

by:techsathish
ID: 26187789
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

0
 
LVL 7

Expert Comment

by:techsathish
ID: 26187794
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

0
 
LVL 7

Expert Comment

by:techsathish
ID: 26187861
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
0
 

Author Comment

by:ginsburg7
ID: 26190673
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.
0
 
LVL 7

Expert Comment

by:techsathish
ID: 26197105
Hi,

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

Author Comment

by:ginsburg7
ID: 26197120
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>
0
 
LVL 7

Expert Comment

by:techsathish
ID: 26197386
Hi ginsburg7,

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

Author Comment

by:ginsburg7
ID: 26197402
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?
0
 
LVL 7

Expert Comment

by:techsathish
ID: 26197444

Hi,

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

Odd-Even.zip
0
 

Author Comment

by:ginsburg7
ID: 26356058
I don't think I'm qualified to determne if any of these solutions are adequate.  I can't get any of them to work, but I don't really know what I am doing with html yet.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question