MediaWiki/jQuery alternating table row colors in IE8

Question

• MediaWiki 1.21
• jQuery 1.8.3 (ships with MediaWiki)

I'm trying to avoid using jQuery Tablesorter because the ['zebra'] widget does not work. Solution should work in IE8 browsers as well as newer browsers.

CSS: Mediawiki:Common.css

/*--- 
    Color scheme looks like an excel table :D
--- */
.mytable {
  border-collapse: collapse; 
  border: 1px solid #AAAAAA;
}

.mytable tbody tr td {
  border: 1px solid #AAAAAA; 
}

.mytable tbody tr th {
  border: 1px solid #AAAAAA;
}

.even {
  background-color: #DCE6F1;
}

.odd {
  background-color: #FFFFFF;
}

.head {
  background-color: #4F81BD;
  color: #FFFFFF;
}

JavaScript: Mediawiki:Common.js

$(document).ready(function() {
    $(".mytable tr:nth-child(even)").addClass('even');
    $(".mytable tr:nth-child(odd)").addClass('odd');

    $(".mytable tr").live('click', function() {
        If ($(this).hasClass('even')) {
            $(this).removeClass('even');
        }
        else if ($(this).hasClass('odd')) {
            $(this).removeClass('odd');
        }
        else {
        $(".tablesorter").trigger('update');
        }
    });
});

Error is always the same

"JavaScript parse error: Parse error: Missing ; before statement in file 'Mediawiki:Common.js' on Line 12"

When I look at whats happening in IE8 using its built-in developer tools all I can really see is that the jscript isn't adding the classes. I've tried several solutions from another question[1] on this site, but haven't been able to get any of them to work for IE8. The weird thing is it was working as recently as 6/27... and I even commented on the below question thanking one of the contributors.

How can I make this css injection work for IE8?

Update:

I modified the script to troubleshoot specifically if this is even working in chrome. I removed some css that might be doing the work for the script with the more modern browser and I can't even get the following to work in Chrome now.

$(document).ready(function() {
    $(".mytable tr:nth-child(even)").addClass("even");
    $(".mytable tr:nth-child(odd)").addClass("odd");
    $(".mytable tr:first-child th").addClass("head");
});

Here is a sample of a table I'm working with in mediawiki where I've added the mytable class. The goal is to style the table when the browser loads, preferably only in jquery so that IE stays compatible, and reapplys the style when the table is sorted (hence the click function above).

{| class="mytable sortable"
! Special Interval <br /> (In Seconds)
! Human Readable Time
|-
| 1
| 1
|-
| 60
| 1 minute
|-
| 600
| 10 minutes
|- 
| 900
| 15 minutes
|-
| 1800
| 30 minutes
|-
| 3600
| 1 hour
|-
| 21600
| 6 hours
|-
| 43200
| 12 hours
|-
| 86400
| 24 hours
|}

[1] jquery tablesorter plugin - retain alternative row colors

(edit: Added final solution below. Pasted into MediaWiki:Common.js)

/*--------------------------------------------------|
| Alternate row styling for myTable class (IE)      |
|--------------------------------------------------*/

$( document ).ready( function() {

    function fixStripes() {

        /* setTimeout() adds a 1ms delay so Mediawiki's tablesorter 
        caching doesn't overwrite the class changes applied manually */
        setTimeout( $.proxy( function() {  

            $( '.mytable' ).find( 'tr' ).removeClass( 'even odd head' )
                .filter( ':even' ).addClass( 'even' ).end()
                .filter( ':odd' ).addClass( 'odd' ).end()
                .filter( ':has(th)' ).addClass( 'head' );

        }, this), 1);
    }

    /* On load */
    fixStripes();

    /* When the table header is clicked, reapply striping */
    $( '.mytable th' ).click( function() {
        fixStripes();
    } );

} );

Answer 1

I think the issue is your "elseif". You need to use "else if" for Javascript. Also, you need to close your last bracket - the "else {".

Answer 2

The only thing I can think of is that jQuery doesn't like If with a capital letter. Try lower case if , like so:

$(document).ready(function() {
    $(".mytable tr:nth-child(even)").addClass('even');
    $(".mytable tr:nth-child(odd)").addClass('odd');

    $(".mytable tr").live('click', function() {
        if ($(this).hasClass('even')) {
            $(this).removeClass('even');
        }
        else if ($(this).hasClass('odd')) {
            $(this).removeClass('odd');
        }
        else {
            $(".tablesorter").trigger('update');
        }
    });
});