使用jQuery按升序对行排序

Question

此代码可以工作，但只检查第一列。我想检查第二列，而不是点。我该如何改变它？

HTML表：

<table width="100%"> 
    <thead> 
     <tr> 
      <th width="60%">Name</th> 
      <th width="20%">School</th> 
      <th width="20%">Points</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td rowspan="4"><h1>Event 1</h1></td> 
      <td>School1</td> 
      <td>74</td> 
     </tr> 
     <tr> 
      <td>School2</td> 
      <td>69</td> 
     </tr> 
     <tr> 
      <td>School3</td> 
      <td>71</td> 
     </tr> 
     <tr> 
      <td>School4</td> 
      <td>11</td> 
     </tr> 
     <tr> 
     <td> </td> 
     <td> </td> 
     </tr> 
     <tr> 
     <td rowspan="4"><h1>Event 2</h1></td> 
      <td>School1</td> 
      <td>34</td> 
     </tr> 
     <tr> 
      <td>School5</td> 
      <td>29</td> 
     </tr> 
     <tr> 
      <td>School3</td> 
      <td>62</td> 
     </tr> 
     <tr> 
      <td>School7</td> 
      <td>15</td> 
     </tr> 
    </tbody> 
</table> 

的jQuery：

var $tbody = $('#caltbl tbody'); 
      $tbody.find('tr').sort(function (a, b) { 
       var tda = $(a).find('td:eq(0)').text(); 
       var tdb = $(b).find('td:eq(0)').text(); 
       // if a < b return 1 
       return tda > tdb ? 1 
         // else if a > b return -1 
         : tda < tdb ? -1 
         // else they are equal - return 0  
         : 0; 
      }).appendTo($tbody); 

我如何得到这个？

JSFIDDLE

编辑：对不起球员，但我的生活代码与正在使用的行跨度不同。是否有可能以升序排列，以便事件排序不同？

Answer 1

您可以对trs进行排序。分离td并插入到数组中。然后将它们追加到每行

添加一些类以简化编码。

JSFIDDLE

HTML

<table width="100%"> 
    <thead> 
     <tr> 
      <th width="60%">Name</th> 
      <th width="20%">School</th> 
      <th width="20%">Points</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="event1"> 
     <td rowspan="4"><h1>Event 1</h1></td> 
      <td>School1</td> 
      <td class="point">74</td> 
     </tr> 
     <tr class="event1"> 
      <td>School2</td> 
      <td class="point">69</td> 
     </tr> 
     <tr class="event1"> 
      <td>School3</td> 
      <td class="point">71</td> 
     </tr> 
     <tr class="event1"> 
      <td>School4</td> 
      <td class="point">11</td> 
     </tr> 
     <tr> 
     <td> </td> 
     <td> </td> 
     </tr> 
     <tr> 
     <td rowspan="4"><h1>Event 2</h1></td> 
      <td>School1</td> 
      <td>34</td> 
     </tr> 
     <tr> 
      <td>School5</td> 
      <td>29</td> 
     </tr> 
     <tr> 
      <td>School3</td> 
      <td>62</td> 
     </tr> 
     <tr> 
      <td>School7</td> 
      <td>15</td> 
     </tr> 
    </tbody> 
</table> 

的JavaScript

var $tbody = $(' tbody'); 
var array = []; 
$tbody.find('.event1').sort(function (a, b) { 
    var tda = $(a).find('.point').text(); 
    var tdb = $(b).find('.point').text(); 
    return tda - tdb; 
}).each(function (idx, tr) { 
    array.push($(tr).children('td').not('[rowspan]').detach()); 
}); 
$.each(array, function (idx, obj) { 
    $(obj).appendTo($('.event1:eq(' + idx + ')')); 
}); 

JavaScript的仅适用于事件1。您可以简单地修改它以执行任意事件。

---

更改索引为Mayank Pandey说。并且..

由于您的第二列是数字，您可以返回它们的差异。

var $tbody = $('#caltbl tbody'); 
$tbody.find('tr').sort(function (a, b) { 
    var tda = parseInt($(a).find('td:eq(1)').text(), 10); // always use the base number 
    var tdb = parseInt($(b).find('td:eq(1)').text(), 10); 
    return tda - tdb; 
}).appendTo($tbody); 

Answer 2

eq（0）表示您正在使用第一个索引。将其更改为eq（1），以便它可以考虑第二个索引。

var tda = $(a).find('td:eq(1)').text(); 
var tdb = $(b).find('td:eq(1)').text();