jQuery，使用子元素中的數字排序表中的行

Question

我需要使用錨中的數字（某些行中不存在錨點）對錶中的行進行排序。表例如：

<table id="sortedtable" class="full"> 
    <tbody> 
     <tr> 
      <th>Main tr</th> 
     </tr> 
     <tr> 
      <td> 
       <div style="float: left;">Title</div> 
       <a class="unreadcount" href="#">7</a> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div style="float: left;">No anchor here :(</div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div style="float: left;">Javascripthatesme</div> 
       <a class="unreadcount" href="#">15</a> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div style="float: left;">Yourox</div> 
       <a class="unreadcount" href="#">2</a> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div style="float: left;">This has more than one word and no anchor</div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div style="float: left;">Title</div> 
       <a class="unreadcount" href="#">11</a> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div style="float: left;">Big Bang Theory is not funny</div> 
       <a class="unreadcount" href="#">4</a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

利用該解決方案在this question我能夠做一個半工作代碼：

var $table = $('table'); 

var rows = $table.find('tr').get(); 
rows.sort(function(a, b) { 
    var keyA = $(a).find('a.unreadcount').text(); 
    var keyB = $(b).find('a.unreadcount').text(); 
    if (keyA < keyB) return 1; 
    if (keyA > keyB) return -1; 
    return 0; 
}); 
$.each(rows, function(index, row) { 
    $table.children('tbody').append(row); 
}); 

你可以看到它在this jsFiddle工作。問題以及我需要幫助的地方是數字排序的方式（例如，8比32或12先出現），並且我需要忽略第一行（其中「Main tr」是），並將其始終置於頂部。

作爲一個額外的，如果你可以給我的方向來做一個按鈕，把表再次按原來的順序將是很棒的。

謝謝。

Answer 1

您需要將文本值轉換爲數字以進行正確的數字排序。 easies轉換的方式是unary plus operator。

要留在原地標題行只是不包括該數組您排序，這是很容易使用jQuery的.slice() method英寸

要添加一個按鈕，將表恢復到其原始順序，只需在排序之前保留該數組的一個副本，這是我使用標準Array .slice() method完成的。

所以：

var $table = $('table'); 

var originalRows = $table.find('tr').slice(1).get(), 
    rows = originalRows.slice(0); 
rows.sort(function(a, b) { 
    var keyA = +$(a).find('a.unreadcount').text(); 
    var keyB = +$(b).find('a.unreadcount').text(); 
    if (keyA < keyB) return 1; 
    if (keyA > keyB) return -1; 
    return 0; 
}); 
$.each(rows, function(index, row) { 
    $table.children('tbody').append(row); 
}); 

// button that changes it back: 
$("input").click(function(){ 
    $.each(originalRows, function(index, row) { 
     $table.children('tbody').append(row); 
    }); 
}); 
​ 

演示：http://jsfiddle.net/hLvwz/5/