Jesus Christ?!
Thanks for all the variations...AND explanations!
Frank
On 10/18/07, Michael Geary <[EMAIL PROTECTED]> wrote:
>
>
> First, combine duplicate code into a single function:
>
> $(document).ready(function() {
> zebra();
> $('th').click( zebra );
> });
>
> function zebra() {
> $('tbody.bevker tr:odd').removeClass();
> $('tbody.bevker tr:even').removeClass();
> $('tbody.bevker tr:odd').addClass('row0 odd');
> $('tbody.bevker tr:even').addClass('row1 even');
> return false;
> }
>
> I also took the liberty of changing the indentation style slightly -
> you're
> using two levels of indentation where one would do (by giving the braces
> their own separate indentation). Naturally you can do this any way you
> want,
> but I didn't see any benefit to the extra indents, so bear with me. :-) In
> addition, I used spaces for indents instead of tabs. I actually do prefer
> tabs, but in an email message the spaces sometimes work better.
>
> Next, use chaining to remove the duplicate $() selectors:
>
> function zebra() {
> $('tbody.bevker tr:odd').removeClass().addClass('row0 odd');
> $('tbody.bevker tr:even').removeClass().addClass('row1 even');
> return false;
> }
>
> Also, since you are completely replacing the class, it would be faster to
> do
> it in one call:
>
> function zebra() {
> $('tbody.bevker tr:odd').attr( 'class', 'row0 odd' );
> $('tbody.bevker tr:even').attr( 'class', 'row1 even' );
> return false;
> }
>
> Then, if there is only a single table you're working with, you can speed
> up
> the code a little by pulling out the common part of the selector:
>
> function zebra() {
> var tbody = $('tbody.bevker')[0];
> $('tr:odd',tbody).attr( 'class', 'row0 odd' );
> $('tr:even',tbody).attr( 'class', 'row1 even' );
> return false;
> }
>
> This would not work if you have multiple tables, but it looks like the
> code
> is already assuming a single table.
>
> You could also set both the even and odd row classes in a single pass.
> This
> would probably be even faster:
>
> function zebra() {
> $('tbody.bevker tr').each( function( i ) {
> $(this).attr( 'class', i % 2 ? 'row1 even' : 'row0 odd' );
> });
> return false;
> }
>
> Or better yet, speed up that inner loop by using the DOM directly instead
> of
> .attr():
>
> function zebra() {
> $('tbody.bevker tr').each( function( i ) {
> this.className = i % 2 ? 'row1 even' : 'row0 odd';
> });
> return false;
> }
>
> I may have the even and odd reversed on the last two examples, but that's
> easy to fix.
>
> -Mike
>
> > From: FrankTudor
> >
> > Here is a bit of code that on page load sets the alternating
> > color of a table.
> >
> > Then there is a table sort tool that loads as well. The th
> > (header) clicks cause the nice alternating line colors to
> > sort as well. So I created this, which works perfect, but it
> > looks clunky/repetitive..
> >
> > I was thinking about wrapping an if statement in here
> > somewhere, or maybe there is something else other people can think of.
> >
> > <script type="text/javascript">
> > $(document).ready(function()
> > {
> > $('tbody.bevker tr:odd').removeClass();
> > $('tbody.bevker tr:even').removeClass();
> > $('tbody.bevker tr:odd').addClass('row0 odd');
> > $('tbody.bevker tr:even').addClass('row1 even');
> >
> > $('th').click(function()
> > {
> > $('tbody.bevker tr:odd').removeClass();
> > $('tbody.bevker tr:even').removeClass();
> > $('tbody.bevker tr:odd').addClass('row0 odd');
> > $('tbody.bevker tr:even').addClass('row1 even');
> > return false;
> > }
> > );
> > }
> > );
> > </script>
>
>
