jQuery tablesorter - IE8问题,向表行添加样式

时间:2021-02-03 03:30:51

Using jQuery tablesorter to sort and give style to each odd row in the table.

使用jQuery tablesorter对表中的每个奇数行进行排序和赋予样式。

Issue: IE8 ignores the table row background or wouldn't apply the style for odd rows. Any idea how to make this work for IE < 9?

问题:IE8忽略表格行背景或不会应用奇数行的样式。知道如何让IE <9?

Here is the http://jsfiddle.net/rdos/kg7e771g/3/ - this works fine in all browsers except IE < 10

这是http://jsfiddle.net/rdos/kg7e771g/3/ - 除了IE <10之外的所有浏览器都可以正常工作

Thanks!

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>

2 个解决方案

#1


Can add td to rule

可以添加td来规则

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

Or

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

Or

Add an IE conditional comment around a style tag that adds the td rule so it only takes effect in IE < 9

在添加td规则的样式标记周围添加IE条件注释,使其仅在IE <9中生效

#2


The below took care of table row style for IE < 9:

下面介绍了IE <9的表行样式:

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

For other browsers - the below kicks in and override the above style:

对于其他浏览器 - 以下内容并覆盖以上样式:

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

#1


Can add td to rule

可以添加td来规则

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

Or

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

Or

Add an IE conditional comment around a style tag that adds the td rule so it only takes effect in IE < 9

在添加td规则的样式标记周围添加IE条件注释,使其仅在IE <9中生效

#2


The below took care of table row style for IE < 9:

下面介绍了IE <9的表行样式:

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

For other browsers - the below kicks in and override the above style:

对于其他浏览器 - 以下内容并覆盖以上样式:

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