使用jQuery按升序对行进行排序

Question

This code works but checks only the first column. I want to check the 2nd column instead with the points. How do I alter it?

HTML Table:

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

How do I got about this?

JSFIDDLE

EDIT: I'm sorry guys but my live code is different with rowspan being used. Is there a possibility to have this in ascending order so that the events are sorted differently?

Answer 1

eq(0) means you are using the first index. Change it to eq(1) so that it can consider the second index.

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

Answer 2

You can sort the trs. Detach the td and insert to an array. Then append them back to each row

Add some class to simplify coding.

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

The JavaScript only applies to event1. You can simply modify it for arbitrary events.

---

Change the index as Mayank Pandey said. And..

Since your second column is number, you can just return their difference.

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