基於關鍵字使用jQuery的HTML行排序

我需要使用特定關鍵字對HTML表進行排序。例如使用jQuery對「AX」，「BY」，「CZ」，「DQ」進行排序。我的表包含多個行與上述含有細胞的一個值基於關鍵字使用jQuery的HTML行排序

<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>

來源

2013-04-24 Girish Nair

你試過[搜索]（https://www.google.com/search?q=jquery+sort+table+based+on+values）？ – billyonecan 2013-04-24 11:07:50

Thankz但我完成了！ :) – 2013-04-29 06:32:16

$('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-24 11:08:51 Durgesh

問題是關於基於預定義字符串的錶行排序，無法使用比較運算符進行評估。 – Durgesh 2013-04-26 11:28:45

如果你希望允許用戶進行排序，篩選等也許你應該考慮使用數據表，它會爲你節省很多時間：http://www.datatables.net/ :)

來源

2013-04-24 11:08:57

你可以使用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-24 11:11:14 undefined

這將是明智的，給你的表中的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"); 
});

See this jsFiddle

來源

2013-04-24 11:27:50

基於關鍵字使用jQuery的HTML行排序

回答

相關問題