jQuery Row Striping

kinneh

kinneh

kinneh

Associate
Joined
18 Oct 2002
Posts
724
Hi

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

Jquery code:

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

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
 
Last edited:
Are you manually creating the HTML or is it generated by a server-side script?
 
The only way I can think of to do this would be something along the lines of...

Code: 
Loop through all TRs
  Loop through all TDs
    If row is odd
      Zebra stripe this row
      If rowspan is set 
        Zebra stripe related rows
        Skip looping through related rows
 
You could do the logic in your server-side script then and set the class there too.

Of course you'll still need custom logic but you're probably already half-way there when setting the rowspans.
 
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.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom