[jQuery] Alternating Row Colors: Last row not coloring
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