css - thead 中的表排序器图标

Question

我有一些 JavaScript 可以将点击的第 th 个元素的类切换为“升序”或“降序”。

问:在 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;
    });
});

Answer 1

取自 jquery Tablesorter plugin

你可以这样写一些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);
}