Styling Even/Odd Table Rows with JQuery

Styling Even/Odd Table Rows in Oscommerce is quick and simple with JQuery. It is especially simple in OSCommerce 2.3 and in OSC to CSS because the JQuery file is already referenced.

See below for specific instructions for installing in OSC to CSS
Adapted from Jquery, The Missing Manual, chapter 6.

  1. Upload the JQuery file, jquery-1.4.2.min.js, to the folder ‘js’ (catalog/js). If you have OSCommerce 2.3, or already use JQuery, skip this step.
  2. Add this reference to the head of the file that contains the table.
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    If you have OSCommerce 2.3 or already use JQuery, skip this step.
  3. Add this script to the head of the file that contains the table.
    <script type="text/javascript">
    $(document).ready(function( ) {
    $('table.striped tr:even').addClass('even');
    });
    </script>
  4. Add this CSS to your stylesheet..even {background-color: #E7F7FF;}
  5. Create a table in the html of your file. Simply give it a class of “striped”. Every other row will be light blue.

DEMO


You can also make the table interactive. Follow the steps above but with following changes:

  1. In step 3 above use this javascript instead
    <script type="text/javascript">
    $(document).ready(function( ) {
    $('table.striped tr:even').addClass('even');
    $('table.striped tbody tr').mouseover(function() {
    $(this).addClass('highlight');
    $(this).css('cursor','pointer');
    }).mouseout(function() {
    $(this).removeClass('highlight');
    });
    });
    </script>
  2. In step 4 above , add this CSS to your stylesheet.
    .even {background-color: #E7F7FF;}
    .highlight {background-color:#D3E3EB !important;}

OSC to CSS: Specific instructions for account_history.php

  1. Place this (the code from above:)
    <script type="text/javascript">
    $(document).ready(function( ) {
    $('table.striped tr:even').addClass('even');
    $('table.striped tbody tr').mouseover(function() {
    $(this).addClass('highlight');
    $(this).css('cursor','pointer');
    }).mouseout(function() {
    $(this).removeClass('highlight');
    });
    });
    </script>

    just above:
    <?php require(DIR_WS_INCLUDES . 'template-top.php'); ?>
  2. Add this CSS to your stylesheet.
    .even {background-color: #E7F7FF;}
    .highlight {background-color:#D3E3EB !important;}
  3. Add the class to the table.
    Find each instance (three places) of:
    <table class="account">
    change to:
    <table class="account striped">