zebra row scrollabledatatable sorting on column error

[x490812]

Am using the richfaces demo for jquery where you add zebra striping to a datatable; Am using it on a scrollableDatatable and it worked right out the gate - great job! However, When I click on a sortable column, the resort and rerender removes the striping. Not sure what to do about that.
here is code

.odd-row {
background-color: #CCCCBB;
}
.even-row {
background-color: #EEEECC;
}
.active-row {
background-color: #FFEBDA;
}
.
.
<div style="padding: 10px;"><h:form
 id="casetableform"
 style="width:802px;margin:auto;border:solid 1px">

 <rich:scrollableDataTable
 id="casetable"
 rows="50"
 columnClasses="col"
 value="#{caseList}"
 var="case"
 sortMode="single"
 width="800px"
 height="600px"
 selection="#{CASELISTFORM.selection}">

 <a4j:support
 event="onRowDblClick"
 action="#{CASELISTFORM.setSelectedCase(case)}">
 </a4j:support>



 <rich:column
 id="caseId"
 sortExpression="#{case.casenumber}">

 <f:facet name="header">
 <h:outputText
 styleClass="headerText"
 value="Case #" />
 </f:facet>

 <h:commandLink
 action="#{CASELISTFORM.setSelectedCase(case)}"
 value="#{case.casenumber}">
 </h:commandLink>

 </rich:column>

.
.


 <rich:column
 id="Status"
 sortExpression="#{case.statusDescription}">

 <f:facet name="header">
 <h:outputText
 styleClass="headerText"
 value="Status" />
 </f:facet>

 <h:outputText value="#{case.statusDescription}" />

 </rich:column>



 </rich:scrollableDataTable>

 <rich:jQuery
 selector="#casetable tr:odd"
 query="addClass('odd-row')" />
 <rich:jQuery
 selector="#casetable tr:even"
 query="addClass('even-row')" />
 <rich:jQuery
 selector="#casetable tr"
 query="mouseover(function(){jQuery(this).addClass('active-row')})" />
 <rich:jQuery
 selector="#casetable tr"
 query="mouseout(function(){jQuery(this).removeClass('active-row')})" />
</h:form></div>

[damianharvey]

I would think that you need someway to fire jQuery again. Should be relatively easy.

I do my zebra-highlight rows without jQuery and I think that they would handle your situation:

<rich:dataTable
 onRowMouseOver="tableRowColor=this.style.backgroundColor;this.style.backgroundColor=tableRowHighlight"
 onRowMouseOut="this.style.backgroundColor=tableRowColor"
 rowClasses="tableRowOdd, tableRowEven"

Where the javascript variables tableRowColor and tableRowHighlight are defined on the page (I pull the rowHighligh from CSS)

Cheers,

Damian.