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

编辑：我很抱歉，但我的实时代码与使用的rowspan不同。是否有可能按升序排列，以便对事件进行不同的排序？

Answer 1

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

playframework1.x

Answer 2

您可以对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仅适用于event1。您可以简单地修改任意事件。

改变指数，正如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);

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

2 个答案: