Have you tried playing with css instead ? If you want to hide elements, you
add the necessary classes to the hidden elements and eventually the visible
ones, and the zebra-ing will be automatic.
This are the original .table-striped rules, just add the classes you want :
.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
If you really want to use JavaScript, then you should use the jQuery selectors
http://api.jquery.com/nth-child-selector/
Something like $('.strip:visible:nth-child(3n)').addClass('newStrip')
On Wednesday, June 27, 2012 7:55:39 PM UTC+2, webLearner101 wrote:
>
> I have a large table and when I press a button I properly hide the rows I
> do not need, however, they maintain there zebra-strips as they were
> originally given. I am trying to make a function so that when I hide them,
> they are assigned new zebra strip for every 3rd row (child).
> Below is my concept, but how do I (where the console.log is) make it so
> that .strip classes now have a class called newStrip (new zebra strip) ?
> Thanks
>
> function reStrip()
> {
> ($(".strip:visible").each(function()
> {
> if (cnt <= 3)
> {
> console.log("have .strip classes have new class called
> newStrip1 ");
>
> cnt++;
> }
> if (cnt > 3 && cnt <= 6)
> {
> console.log(" have .strip classes have new class called
> newStrip2 ");
> cnt ++;
> }
> if (cnt == 7)
> cnt = 1;
> }))
>
> }
>
