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中使用以下内容。

$(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 plugin - retain alternative row colors

（编辑：在下面添加了最终解决方案。粘贴到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');
        }
    });
});

MediaWiki / jQuery在IE8中交替表行颜色

2 个答案: