Forums

Alternating Row Colors On Table With Search Function

Permalink 1 user found helpful
I had a post concerning this in another spot, but since I wasn't getting any responses I thought I would re-post it. I have a table set up with CSS to have a alternating color scheme for the rows. It was working great until I added the search feature. Now when I search the table, it doesn't alternate the colors of the rows. It seems to display them in the same colors as it did before.

Here is the JSFiddle:http://jsfiddle.net/Pw46A/7/
If you search for "j" you will see what I am talking about.

Any ideas?
Blenderite
 
JohntheFish replied on at Permalink Reply
JohntheFish
What is happening is that the search hides the rows that don't match. The hidden rows still exist, so are being counted for the even/odd.

The best way to fix it would be to modify the jquery search to swap a class that then decides if a row is visible or not (rather than swap the style display properties).

eg:
tr.search-selected{
 display: table-row;
}
tr.search-hidden{
 display: none;
}

Then use .search-selected as part of the css selector for the striping.

EDIT
Just had a play with the fiddle and the above won't work because it turns out nth child(odd) etc is counted on table rows irrespective of whether they are shown or not.
Blenderite replied on at Permalink Reply
Blenderite
Are you saying to have a different style for the table when it has been searched? And then toggle that on with jQuery?
JohntheFish replied on at Permalink Reply
JohntheFish
I was saying that, but having tried it I have just edited my post above.

Do you want this to work in association with the sortable striping you were asking about in the other thread?
Blenderite replied on at Permalink Reply
Blenderite
Yes, I am wanting it to work with the sortable striping.
JohntheFish replied on at Permalink Reply
JohntheFish
Having dug a bit further, it looks like a css odd/even solution is not possible within a searchable table and the only way round this is to go back to adding the striping with jquery.

So begin with an un-striped table, then whenever any change is made (sort, search etc.) run through the table, remove all stripe classes, then add stripe classes to alternate rows.
JohntheFish replied on at Permalink Reply
JohntheFish
Something like (completely untested so will need some work):
var stripe=function(){
 $('#stripe_me tr').removeClass('stripe');
 $('#stripe_me tr').filter(':visible').filter(':odd').addClass('stripe');
}


and css:
tr.stripe>td{
 background-color:pink;
}


Then call stripe() on ready, on sort and on search.
Blenderite replied on at Permalink Reply
Blenderite
Wow, that is a bit of work. I might just keep it as is and toggle the striping off when a search is done. That seems like it would be easier.