jQuery tablesorter - IE8 向 table 行添加样式时出现问题

Question

使用 jQuery table 排序器对 table 中的每个奇数行进行排序并赋予样式。

问题：IE8 忽略 table 行背景或不会为奇数行应用样式。知道如何使它适用于 IE < 9 吗？

这是 http://jsfiddle.net/rdos/kg7e771g/3/ - 除了 IE < 10

之外的所有浏览器都可以正常工作

谢谢！

JSP:

<html>
<head>
<style type="text/css">
.tablesorter tbody tr:nth-child(odd) {
    background-color: #faf4e2;
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/js/jquery.tablesorter.js"></script>
<script type="text/javascript">
    $(document).ready(function() {          
            $("#myTable").tablesorter();            
        } 
    ); 
</script>
</head>

<body>
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th>     
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Saul</td> 
    <td>Tarsus</td> 
    <td>st@mail.com</td> 
   </tr> 
<tr> 
    <td>Paul</td> 
    <td>Rock</td> 
    <td>pr@mail.com</td>     
</tr> 
</tbody> 
</table> 
</body>
</html>

Answer 1

可以将 td 添加到规则

.tablesorter tbody tr:nth-child(odd) td{
    background-color: #faf4e2;
}

或

  .tablesorter tbody tr:nth-child(odd), .tablesorter tbody tr:nth-child(odd) td{
        background-color: #faf4e2;
    }

或

在添加 td 规则的样式标签周围添加 IE 条件注释，使其仅在 IE < 9

中生效

Answer 2

下面处理 table IE < 9 的行样式：

$(document).ready(function() {               
        $('#myTable')
        .tablesorter({ widgets: ['zebra'] })
        .bind('sortEnd', function(){
            $("#myTable").trigger("applyWidgets");              
        });
    } 
);

对于其他浏览器 - 下面开始并覆盖上面的样式：

.tablesorter tbody tr:nth-child(odd) {
    background-color: #faf4e2;
}

jQuery tablesorter - IE8 向 table 行添加样式时出现问题

jQuery tablesorter - IE8 issue with adding style to table row

javascript

css

jquery

tablesorter

internet-explorer-8

JSP: