我有一些 JavaScript 可以将单击的第一个元素的类切换为“升序”或“降序”。
问:在 CSS 中,如何显示与 .ascending 或 .descending 关联的 jQuery-UI 图标?
<table>
<thead>
<tr>
<th class="ascending">Cust</th>
<th>Name</th>
</tr>
</thead>
...
</table>
这是代码,以防万一有人发现效率低下:
jQuery(function($) {
$('.thSort th').click(function() {
var $th = $(this);
$th.siblings().removeClass('selected ascending descending');
$th.addClass('selected');
var column = $th.index();
var $table = $th.closest('table');
var rows = $table.find('tbody > tr').get();
if ($th.hasClass('ascending')) {
$th.removeClass('ascending');
$th.addClass('descending');
rows.sort(function(rowA,rowB) {
var keyA = $(rowA).children('td').eq(column).text().toUpperCase();
var keyB = $(rowB).children('td').eq(column).text().toUpperCase();
if (keyA < keyB) return 1;
if (keyA > keyB) return -1;
return 0;
});
} else {
$th.removeClass('descending');
$th.addClass('ascending');
rows.sort(function(rowA,rowB) {
var keyA = $(rowA).children('td').eq(column).text().toUpperCase();
var keyB = $(rowB).children('td').eq(column).text().toUpperCase();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
}
$.each(rows, function(index,row) {
$table.children('tbody').append(row);
});
return false;
});
});
最佳答案
你可以像这样编写一些CSS:
table thead th{
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
.ascending{
background-image: url(asc.gif);
}
.decending{
background-image: url(desc.gif);
}
关于css - 头部中的表排序器图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6219869/