javascript - 将行插入表中，这些行按某些值属性排序

Question

我有一个简单的 HTML 表格，我想用 JQuery 向表格中插入新行。

每一行都有一个自定义的 val 属性，里面有 UNIX 时间戳，例如:

<tr data-val="1356998400"><!-- Some row content --></tr>

我想用 JQuery 插入新行，我希望它们在插入后按 val 属性排序。

明显的解决方案是将 id-s 设置为 rows 并在每次插入之前手动扫描 rows 数组(执行时间值比较)以找到正确的插入位置，但可能有更多类似 JQuery 的解决方案？我想对于这种情况应该存在一种单线解决方案。

Answer 1

最初，您可以使用基本的 sort 函数对表格进行排序(如果行尚未排序):

标记

(注意:将您的自定义 val 属性添加为数据属性)

<table>
  <tbody>
    <tr data-val="1"><td>1st</td></tr>
    <tr data-val="4"><td>3rd</td></tr>
    <tr data-val="7"><td>4th</td></tr>
    <tr data-val="2"><td>2nd</td></tr>
  </tbody>
</table>

jQuery

$('table').html(function() {
  return $(this).find('tr').sort(function(a, b) {
    return $(a).data('val') > $(b).data('val');
  });
});

对行进行排序后，您可以轻松找到插入新行的位置，方法是抓取其 data-val 大于或等于 data-val 的第一行newRow 的:

var $newRow = $('<tr data-val="3"><td>Between 2nd and 3rd!</td></tr>');
var elementToInsertBefore = $('tr').filter(function() {
    return $(this).data('val') >= $newRow.data('val');
}).get(0);

if (typeof elementToInsertBefore === 'undefined') {
    $('table').append($newRow);  
} else {
    $newRow.insertBefore(elementToInsertBefore);
}

因此，如果过滤器未返回 elementToInsertBefore(即没有现有行的 data-val 大于或等于 $newRow的 data-val，将其追加到表的末尾，否则将其插入到elementToInsertBefore之前。

旁注:使用 for 循环获取 elementToInsertBefore 可能更有效。这样，只要找到满足条件的行，就可以break，这样可以防止进一步不必要的迭代(在处理大量的行)。

如果您想要更详细的内容，请查看提到的 jQuery 插件。

Here's a fiddle