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