Question

我正在使用以下代码对表行进行排序，它可以根据需要运行。

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

但是，某些条目没有与data-site关联的值。属性在那里，但没有设置。

这些行会添加到表格的顶部，我希望它们位于表格表格行的底部 ID=LastGroup

任何人都可以建议我如何做到这一点吗？

由于

Answer 1

如果该属性存在但没有值，则您从attr获得的值将为""。所以请允许：

if (!keyA) return 1;
if (!keyB) return -1;
if (keyA > keyB) return 1;
if (keyA < keyB) return -1;

示例：

$("#sort").on("click", function() {
  var $table = $('#Frm1');
  var rows = $table.find('tr.grp').get();
  rows.sort(function(a, b) {
    var keyA = $(a).attr('data-site');
    var keyB = $(b).attr('data-site');
    if (!keyA) return 1;
    if (!keyB) return -1;
    if (keyA > keyB) return 1;
    if (keyA < keyB) return -1;
    return 0;
  });
  $.each(rows, function(index, row) {
    $table.children('tbody').append(row);
  });
});

<table id="Frm1">
  <tbody>
    <tr class="grp" data-site="c"><td>c</td></tr>
    <tr class="grp" data-site="a"><td>a</td></tr>
    <tr class="grp" data-site="b"><td>b</td></tr>
    <tr class="grp" data-site><td>(none)</td></tr>
    <tr class="grp" data-site="q"><td>q</td></tr>
  </tbody>
</table>
<input type="button" id="sort" value="Sort">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

这个答案基于@ T.J.Crowder的回答如果您想特意检查tr id="LastGroup"，请在进行任何其他检查之前检查：

if ($(a).attr('id') == 'LastGroup') {
    return 1;
}
if ($(b).attr('id') == 'LastGroup') {
    return -1;
}

$("#sort").on("click", function() {
  var $table = $('#Frm1');
  var rows = $table.find('tr.grp').get();
  rows.sort(function(a, b) {
    var keyA = $(a).attr('data-site');
    var keyB = $(b).attr('data-site');
    if ($(a).attr('id') == 'LastGroup') {
      return 1;
    }
    if ($(b).attr('id') == 'LastGroup') {
      return -1;
    }
    if (!keyA) return 1;
    if (!keyB) return -1;
    if (keyA > keyB) return 1;
    if (keyA < keyB) return -1;
    return 0;
  });
  $.each(rows, function(index, row) {
    $table.children('tbody').append(row);
  });
});

<table id="Frm1">
  <tbody>
    <tr class="grp" data-site="a" id="LastGroup"><td>this should be last</td></tr>
    <tr class="grp" data-site="c"><td>c</td></tr>
    <tr class="grp" data-site="a"><td>a</td></tr>
    <tr class="grp" data-site="b"><td>b</td></tr>
    <tr class="grp" data-site><td>(none)</td></tr>
    <tr class="grp" data-site="q"><td>q</td></tr>
  </tbody>
</table>
<input type="button" id="sort" value="Sort">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Jquery订购表行

2 个答案: