Alternating Color in Jquery Template

First of all create a div containing table for jquery template header and body.



 <div >
                <div style="width: 580px;">
                    <table id="tblListofItems">
                        <thead>
                            <tr>
                                <th align="left">
                                    Item Detail<span style="float: right;"></span>
                                </th>
                                <th align="left">
                                    Item Price<span style="float: right;"></span>
                                </th>
                                <th align="left">
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody id="listofItems">
                        </tbody>
                    </table>
                </div>


Second create jquery template for each row.


  <script id="ItemTemplate" type="text/x-jquery-tmpl">  
        <tr class="${oddOrEven()}">
            <td>
                  <B> ${Name} </B>
                   <br />
                   ${Description}
                  <br />
                   Type: ${Type}
                  <br />
                  <br />
            </td>          
            <td style="text-align:center;">
                ${Rate}
            </td>              
        </tr>
    </script>


Thrid create web service to bind all jquery template.


   $(document).ready(function () {    
                GetAllItems(Id);            
        });

   function oddOrEven() {
            return ($.inArray(this.data, items) % 2) ? "jqueryGridEvenRow" : "jqueryGridOddRow";
        }



.jqueryGridOddRow
{
    border-bottom: 1px solid #C2C2C2;
    border-top: 1px solid #C2C2C2;
    background-color: #ffffff;
    color: #000000;
    text-align: left;
    font-family: Verdana;
    font-size: 12px; /*background-color: #F0F0F6;*/
}
.jqueryGridEvenRow
{
    border-bottom: 1px solid #C2C2C2;
    border-top: 1px solid #C2C2C2;
    background-color: #E9F8F8;
    color: #022e41;
    text-align: left;
    font-family: Verdana;
    font-size: 12px;
    margin-left: 3px;
}





   function GetItemByIdSucceeded(result) {      
         var  items = result.d;
            $("#listofItems").empty();
            $('#ItemTemplate').tmpl(items).appendTo('#listofItems');
            $("#listofItems tbody tr").addClass("delete");
            $("#listofItems").trigger("update");
            $("#listofItems").trigger("appendCache");
            $("#listofItems tbody tr.delete").remove();
            $("#listofItems").trigger("update");
            return;
        }

        function GetItemByIdFailed(result) {      

        }

        function GetAllItems() {        
            $.ajax({
                url: "../WebServices/ItemService.asmx/GetAllItem",
                data: JSON.stringify({ }), // parameter map
                type: "POST", // data has to be POSTED              
                contentType: "application/json",
                dataType: "json",
                success: GetItemByIdSucceeded,
                error: GetItemByIdFailed
            });
        }









Note:-Please comment and reply me.