Creating alternating row colors on a table in ColdFusion using jQuery

Readability

Creating alternating row colors on a table in ColdFusion using jQuery

In a pre­vi­ous exam­ple, “Cre­at­ing alter­nat­ing row col­ors on a table in Cold­Fu­sion”, we saw how you could add alter­nat­ing row col­ors on an HTML table in Cold­Fu­sion by loop­ing over a data­base query and using the query currentRow attribute and the MOD oper­a­tor to deter­mine if the cur­rent row num­ber is “odd” or “even”.

The fol­low­ing exam­ple shows how you can use jQuery to dynam­i­cally set the CSS backgroundColor style if the cur­rent table row is “odd” or “even”.


    SELECT *
    FROM ORDERS
    ORDER BY ORDERDATE DESC




    
    




    
ID: NAME: DATE: TOTAL (USD):
#getOrders.ORDERID# #getOrders.CUSTOMERLASTNAME#, #getOrders.CUSTOMERFIRSTNAME# #dateFormat(getOrders.ORDERDATE)# #dollarFormat(getOrders.TOTAL)#

And the out­put of the <CFOUT­PUT> tag is as fol­lows:
CFQUERY currentRow MOD 2

Or, instead of set­ting styles indi­vid­u­ally, you can set a CSS class selec­tor on the odd/​even rows, as seen in the fol­low­ing snippet:


    
    
    

In a previous example, “Creating alternating row colors on a table in ColdFusion”, we saw how you could add alternating row colors on an HTML table in ColdFusion by looping over a database query and using the query currentRow attribute and the MOD operator to determine if the current row number is “odd” or “even”.

The following example shows how you can use jQuery to dynamically set the CSS backgroundColor style if the current table row is “odd” or “even”.

<cfquery name="getOrders" datasource="cfartgallery">
    SELECT *
    FROM ORDERS
    ORDER BY ORDERDATE DESC
</cfquery>
 
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("table#orders tbody tr:even").css("background-color", "#EEEEEE");
        $("table#orders tbody tr:odd").css("background-color", "#FFFFFF");
    });
    </script>
</head>
<body>
 
<table id="orders">
    <thead>
    <tr bgcolor="#CCCCCC">
        <th>ID:</th>
        <th>NAME:</th>
        <th>DATE:</th>
        <th>TOTAL (USD):</th>
    </tr>
    </thead>
    <tbody>
    <cfoutput query="getOrders">
    <tr>
        <td align="center">#getOrders.ORDERID#</td>
        <td><strong>#getOrders.CUSTOMERLASTNAME#</strong>, #getOrders.CUSTOMERFIRSTNAME#</td>
        <td>#dateFormat(getOrders.ORDERDATE)#</td>
        <td align="right">#dollarFormat(getOrders.TOTAL)#</td>
    </tr>
    </cfoutput>
    </tbody>
</table>
 
</body>
</html>

And the output of the <CFOUTPUT> tag is as follows:
CFQUERY currentRow MOD 2

Or, instead of setting styles individually, you can set a CSS class selector on the odd/even rows, as seen in the following snippet:

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("table#orders tbody tr:even").addClass("even");
        $("table#orders tbody tr:odd").addClass("odd");
    });
    </script>
    <style>
        .odd {
            background-color: #EEEEEE;
        }
        .even {
            background-color: #FFFFFF;
        }
    </style>
</head>

Leave a Reply

Your email address will not be published.