I have a function that is calling a list of events. Within the <code>.each</code> is alternating row colors code (see below):
function DisplayEventList(info,event_id) { $.post('/url/server.php', { request:info, event_id:event_id }, function(xml) { $('#event-listing tbody').empty(); $(xml).find('list').each(function() { var startdate = $("start",this).text(); var location = $("location",this).text(); var event_name = $("event_name",this).text(); var speaker = $("speaker",this).text(); var e_id = $("event",this).text(); if(info == "specific") { var currentpricing = $("current_pricing",this).text(); } $('#event-listing tbody tr:odd').css("background-color", "#EFF1F1"); $('#event-listing tbody tr:even').css("background-color", "#A4D1FF"); var html = '<tr height="35" style="font-size:smaller;" align="center">'; html += '<td>' + startdate + '</td>'; html += '<td>' + location + '</td>'; html += '<td>' + event_name + '</td>'; html += '<td>' + speaker + '</td>'; if(info == "specific") { html += '<td>' + currentpricing + '</td>'; } html += '</tr>'; $('#event-listing tbody').append($(html)); }); }); } ***END CODE*** And my table looks like: <table id="event-listing" width="100%" class="ui-widget ui-widget- content" cellspacing="0"> <thead> <tr class="ui-widget-header" style="font-size:small"> <th> </th> <th>Begins</th> <th>Location</th> <th>Event</th> <th>Speaker</th> <? if($_GET['event']) { ?> <th>Current Pricing</th> <? } ?> </tr> </thead> <tbody> </tbody> </table> ***END CODE*** My problem is that the last line of my returned rows isn't coloring. If 14 rows return, the first 13 will alternate coloring, but the 14th will not. Consequently, if only 1 line is returned, it does not color. Thanks for your time, Shadraq