IE8中的MediaWiki / jQuery交替使用表格行顏色

Question

• MediaWiki 1.21
• jQuery 1.8.3（MediaWiki附帶）

我試圖避免使用jQuery Tablesorter，因為['zebra']小部件無法正常工作。 解決方案應該在IE8瀏覽器以及更新的瀏覽器中都可以使用。

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');
        }
    });
});

錯誤總是一樣

“ JavaScript分析錯誤：分析錯誤：缺少；第12行上的文件'Mediawiki：Common.js'中的語句之前”

當我使用內置的開發人員工具查看IE8中發生的情況時，我真正看到的是jscript沒有添加類。 我已經嘗試過本站點上另一個問題[1]的幾種解決方案，但還沒有辦法使它們適用於IE8。 奇怪的是，它直到6/27才開始工作。。。我什至對以下問題發表了評論，感謝其中一位貢獻者。

如何使此CSS注入適用於IE8？

更新：

我修改了腳本以專門解決問題，即使這在chrome中也可以解決。 我刪除了一些可能在更現代的瀏覽器上完成腳本工作的CSS，而現在我什至無法在Chrome中使用以下CSS。

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

這是我在mediawiki中使用的表的示例，其中添加了mytable類。 目標是在瀏覽器加載時為表格設置樣式，最好僅在jquery中設置樣式，以使IE保持兼容，並在對表格進行排序時重新應用樣式（因此，單擊函數上面）。

{| 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插件-保留其他行顏色

（編輯：在下面添加了最終解決方案。粘貼到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

我認為問題是您的“ elseif”。 您需要對Javascript使用“ else if”。 另外，您需要關閉最后一個括號-“ else {”。

Answer 2

我唯一能想到的是jQuery不喜歡If帶有大寫字母。 嘗試使用小寫字母if ，例如：

$(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');
        }
    });
});