jQuery Row Striping

[kinneh]

Hi

I have a table and im using Jquery to stripe the rows to give the "zebra" row striping effect.

Jquery code:

$(document).ready(function() {	
$('.list tbody tr:even').removeClass('odd');
$('.list tbody tr:odd').addClass('odd');
});

Currently, using the jquery code above and the HTML table code below, its striping the 2nd and 4th row with the class "odd".

However, if im using rowspans, I really want to combine the rows to only stripe 1 row. I need it to add the "odd" class to the 2nd and 3rd row, since it has a rowspan. The 4rd row does not have a class of "odd"

Table code

<table class="list">
	<tbody>
	<tr> <!-- row 1 -->
		<th width="80">Order No</th>
		<th>Description</th>
		<th width="30">Qty</th>
		<th width="170">Status</th>
	</tr>
	<tr><!-- row 2 -->
		<td valign="top" rowspan="2">Order #1</td>
		<td valign="top">Prod 1</td>
		<td valign="top">1</td>
		<td valign="top" align="left" rowspan="2">Complete</td>
	</tr>
	<tr><!-- row 3 -->
		<td valign="top">Prod 1.1</td>
		<td valign="top">1</td>
	</tr>
	<tr><!-- row 4 -->
		<td valign="top" rowspan="1">Order #2</td>
		<td valign="top">Prod 2</td>
		<td valign="top">1</td>
		<td valign="top" align="left" rowspan="1">Test</td>
	</tr>
</tbody></table>

Kinda hard to explain but any ideas would be greatly appreciated. Thanks

 

[kinneh]

Results (table rows) are being pulled from a database, so the structure of the table is dynamic.

 

[kinneh]

Im afraid it has to be done client-side due to AJAX calls and what not. I dont want to keep reloading the page to work out the stripe logic, if it was server-side.