3

我需要使用特定关键字对 HTML 表进行排序。例如，使用 jQuery 对“AX”、“BY”、“CZ”、“DQ”进行排序。我的表包含多行，其中一个单元格包含上述值

 <table>
 <tr><td>Test1</td><td>BY</td></tr>
 <tr><td>Test2</td><td>AX</td></tr>
 <tr><td>Test3</td><td>DQ</td></tr>
 <tr><td>Test4</td><td>AX</td></tr>
 <tr><td>Test5</td><td>DQ</td></tr>
 <tr><td>Test6</td><td>CZ</td></tr>
 <tr><td>Test7</td><td>CZ</td></tr>
 <tr><td>Test8</td><td>AX</td></tr>
 </table>

表应重新排列如下：

 <table>
 <tr><td>Test8</td><td>AX</td></tr>
 <tr><td>Test2</td><td>AX</td></tr>
 <tr><td>Test4</td><td>AX</td></tr>
 <tr><td>Test1</td><td>BY</td></tr>
 <tr><td>Test6</td><td>CZ</td></tr>
 <tr><td>Test7</td><td>CZ</td></tr>
 <tr><td>Test3</td><td>DQ</td></tr>
 <tr><td>Test5</td><td>DQ</td></tr>
 </table>
4

4 回答 4

3

您可以使用sort方法：

$('table tr').sort(function(a, b) {
    return $('td:eq(1)', a).text() > $('td:eq(1)', b).text();
}).appendTo('tbody');

http://jsfiddle.net/NrUCw/

于 2013-04-24T11:11:14.220 回答
2

给你的桌子一个 id 是明智的：

<table id="mytable">

然后您可以像使用谓词函数对 javascript 数组进行排序一样对元素进行排序：

Javascript

var keywordWeights = { "AX": 0, "BY": 1, "CZ": 2, "DQ": 3 };

$(function() {
    $("#mytable tr").sort(function(a, b) {
        var tagA = $("td:nth-child(2)", a).html();
        var tagB = $("td:nth-child(2)", b).html();
        weightA = tagA in keywordWeights ? keywordWeights[tagA] : Number.MAX_VALUE;
        weightB = tagB in keywordWeights ? keywordWeights[tagB] : Number.MAX_VALUE;
        return weightA - weightB;
    }).appendTo("tbody");
});

看到这个 jsFiddle

于 2013-04-24T11:27:50.650 回答
1 
$('TABLE > TBODY > TR > TD:nth-child(1)').each(function () {
    var cellText = $.trim($(this).text());
    var row = $(this).closest("TR");
    switch (cellText) {
        case AX:
            SetPriority(row, 0);
            break;
        case BY:
            SetPriority(row, 1);
            break;
        case CZ:
            SetPriority(row, 2);
            break;
        case DQ:
            SetPriority(row, 3);
            break;
        default:
            SetPriority(row, 4);
            break
    }
});

function SetPriority(row, priority) {
    row.attr("RowIndex", priority);
}

var $table = $('TABLE');
var rows = $table.find('tr').get();

rows.sort(function (a, b) {
    var keyA = $(a).attr('RowIndex');
    var keyB = $(b).attr('RowIndex');
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
});

$.each(rows, function (index, row) {
    $table.children('tbody').append(row);
});
于 2013-04-24T11:08:51.447 回答
0

如果您想允许用户进行排序、过滤等，也许您应该考虑使用数据表，它将为您节省大量时间：http ://www.datatables.net/ :)

于 2013-04-24T11:08:57.570 回答