Question

我有一些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;
    });
});

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

Answer 2

<th scope="col"><div class="floatleft">Topic</div>
<div class="floatright ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-triangle-n"></span>
</div>
</th>

在JavaScript中，在ui-icon-circle-triangle-n和ui-icon-circle-triangle-s之间切换。如果用户点击了新的th，则只用第一个div中的文本替换前一个内的所有html。

表在thead中的分拣机图标

2 个答案: