Can't seem to figure out if the issue I'm facing is related to my browser or CSS3.
I am using a datagrid with a basic HTML table structure:
<table>
<thead>
...
</thead>
<tbody>
<tr class="found">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr class="found">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr class="found">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
A jQuery function is being used to search within the TD elements. If found, it maintains the "found" class. If not found, it removes the "found" class and adds a "not-found" class which sets display to none.
The search function is functioning correctly and classes are being assigned as expected. However, I am encountering an issue with applying styling to alternate rows using CSS pseudo selectors.
tr.found:nth-child(even) {
background: #fff;
}
tr.found:nth-child(odd) {
background: #000;
}
This styling works fine before a search is performed. But post-search, when the "not-found" class is applied, the pseudo selector seems to only apply to the element rather than the element along with the class. It appears that the pseudo selectors are set on page load and remain static thereafter.
I could manually reassign specific even and odd classes in my jQuery search function, but that would become messy. Additionally, since my column headers are sortable, I'd have to reapply these classes upon each sorting event, making the process inefficient. This repetitive class change might be visible as data samples increase, something I'm trying to avoid.
Any suggestions to resolve this issue?
EDIT
I've created a JSFiddle for you all to play around with: http://jsfiddle.net/bDePR/
If you search for "President" or "Secretary", you'll see the behavior I'm describing.