我一直在尝试找到一种适用于 IE 7+ 和 Firefox 的方法来获取渐变列标题行,并在使用 Jquery 对其进行排序时显示向上/向下箭头。下面的示例表我可以在 Firefox 中工作,但 IE 不会显示箭头。有谁知道如何让它同时适用于两者?
桌子...
<script>
$(document).ready(function(){
$("#dataTable").tablesorter({
headers: sortClassAsc: 'headerSortUp',
sortClassDesc: 'headerSortDown',
headerClass: 'headerSort'
});
});
</script>
<table id="dataTable" class="dataTable">
<thead>
<tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
</tbody>
</table>
css....
table.dataTable {
font-size: 11px;
background: #fff;
border-collapse: collapse;
text-align: left;
font-weight: normal;
border-bottom: 1px solid #8AB8E6;
border-top: 1px solid #8AB8E6;
}
table.dataTable td {
border-bottom: 1px solid #ccc;
color: #000;
padding: 3px 4px;
}
table.dataTable thead tr th {
font-size: 12px;
font-weight: normal;
padding: 4px;
border-bottom: 1px solid #8AB8E6;
color: #000;
text-decoration: none;
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0F4FC', endColorstr='#9BC5F4'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#E0F4FC), to(#9BC5F4)); /* for webkit browsers */
background: -moz-linear-gradient(top, #E0F4FC, #9BC5F4); /* for firefox 3.6+ */
}
table.dataTable .headerSort {
background-image: url('../images/bg.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.dataTable .headerSortUp {
background-image: url('../images/asc.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.dataTable .headerSortDown {
background-image: url('../images/desc.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}