Question

以下是我的表

  <table id="sorting">
  <tbody>
    <tr>
        <td>Ann Smith</td>
        <td>Ball Clever</td>
        <td>Cat Work</td>
         <td>Deer Run</td>
    </tr>
  </tbody>
</table>

我希望将排序应用于姓氏/秒名称，并按如下方式显示输出：

<table id="sorting">    
      <tbody>
        <tr>
            <td>Ball Clever</td>
            <td>Deer Run</td>        
            <td>Ann Smith</td>      
            <td>Cat Work</td>
        </tr>
      </tbody>
    </table>

任何建议。我希望使用JQuery完成此操作。

Answer 1

我假设你的意思是每个单元格都是它自己的行，而不是你想要排序一行，在这种情况下我建议使用this Tablesorter plugin和自定义textExtraction函数，例如：$(x).text().split(' ').reverse()。

Answer 2

$items.sort(function(a, b){
    if($(a).html().split(' ')[1] < $(b).html().split(' ')[1]) return -1;
    if($(a).html().split(' ')[1] > $(b).html().split(' ')[1]) return 1;
    return 0;
});

https://jsfiddle.net/jbg8gr3x/1/

Answer 3

function compare(a, b) {
  console.log(a)
  var splitA = a.innerHTML.split(" ");
  var splitB = b.innerHTML.split(" ");
  var lastA = splitA[splitA.length - 1];
  var lastB = splitB[splitB.length - 1];

  if (lastA < lastB) return -1;
  if (lastA > lastB) return 1;
  return 0;
}

var names = $('td');

var sorted = names.sort(compare);
$('#sorting tr').html(sorted)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="sorting" border="0">
  <tbody>
    <tr>
      <td>Ann Smith</td>
      <td>Ball Clever</td>
      <td>Cat Work</td>
      <td>Deer Run</td>
    </tr>
  </tbody>
</table>

Answer 4

您可以在sort()元素的jQuery集合上使用td JS方法，然后使用.html()将已排序的单元格添加到其父tr元素。

$('#sorting tbody tr').each(function() {
    $(this).html( $(this).find('td').sort(function(a,b) {
        return $(a).text().split(' ')[1] < $(b).text().split(' ')[1] ? -1 :
        $(a).text().split(' ')[1] > $(b).text().split(' ')[1] ? 1 : 0;
    }) );
});

如果你真的希望每个单元格都在它自己的行中，那么稍微修改代码就可以使用正确的HTML。

$('#sorting tbody tr').each(function() {
    $(this).html( $(this).find('td').sort(function(a,b) {
        return $(a).text().split(' ')[1] < $(b).text().split(' ')[1] ? -1 :
        $(a).text().split(' ')[1] > $(b).text().split(' ')[1] ? 1 : 0;
    }) );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table id="sorting">
  <tbody>
    <tr>
        <td>Ann Smith</td>
        <td>Ball Clever</td>
        <td>Cat Work</td>
         <td>Deer Run</td>
    </tr>
  </tbody>
</table>

使用JQuery按姓氏/秒名称对表进行排序

4 个答案: