Question

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

每一行都有一个自定义val属性，其中包含UNIX时间戳，例如：

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

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

obviuos解决方案是将id - s设置为行并在每次插入之前手动扫描行数组（执行时间值比较）以找到要插入的正确位置，但可能还有更多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's data-val，将其附加到表的末尾，否则将其插入elementToInsertBefore。

之前

旁注：使用for循环来获取elementToInsertBefore可能更有效率。这样，只要找到符合条件的行，就可以break输出，这可以防止进一步的不必要的迭代（在处理大量数据时，可以获得不错的性能提升行）。

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

Here's a fiddle

Answer 2

另一个解决方案：使用http://api.jquery.com/children/获取所有tr元素（无需Ids）检查值并重新排列它们。如果它们的顺序正确，请删除表格内容并重新插入行。

（甚至不需要清除表并重新插入所有行。http://api.jquery.com/insertAfter/使您能够在正确的两个值之间插入一行（如果您编写正确的循环逻辑）

您可以使用http://api.jquery.com/attr/

从dom节点中获取所有类型的属性

Answer 3

我有一个tablesorter的分支，允许您从表格单元格中编写一个可以extract data attributes的解析器，并分配特定的textExtraction for each column。

代码：

$(function(){

  $.tablesorter.addParser({ 
    // set a unique id 
    id: 'myParser', 
    is: function(s) { 
      // return false so this parser is not auto detected 
      return false; 
    }, 
    format: function(s, table, cell, cellIndex) { 
      // get data attributes from $(cell).attr('data-something');
      // check specific column using cellIndex
      return $(cell).attr('data-something');
    }, 
    // set type, either numeric or text 
    type: 'text' 
  }); 

  $('table').tablesorter({ 
    headers : { 
      0 : { sorter: 'myParser' }
    }
  });

});

Answer 4

如果你想使用JQuery，那么可能没有。选项如

tablesorter，JQuery Datatable等

请看以下示例。

http://tablesorter.com/docs/

Answer 5

如果您想根据每个val上的<tr>属性值进行排序，可以使用以下代码。

演示：http://jsfiddle.net/RvJ6e/

HTML代码

<table>
</table>

CSS代码

table td {
    border : 1px solid #ccc;
}

JavaScript代码

$(function() {
    //To add a new row after every 3 seconds.
    setInterval(function() {
        //I am generating a random number to demo table sorting properly.
        var val = parseInt(Math.random() * 10000);
        $('table').append('<tr val="' + val + '"><td>' + val + '</td></tr>');
        sortTable();
    }, 3000);
});

function compareRows (tr1, tr2) {
    var val1 = parseInt($(tr1).attr('val'));
    var val2 = parseInt($(tr2).attr('val'));
    return ((val1 > val2) ? 1 : ((val1 < val2) ? -1 : 0));
};

function sortTable() {
    $('table tr').sort(compareRows).appendTo('table');
}

我做了很多假设。需要根据您的要求进行更新。

如果你想要其他人建议的高级排序，最好依赖一些可用的jQuery插件。

Answer 6

根据您可能使用以下代码的val元素中的tr属性对整个表进行排序：

orig  = 
    $.map (
        $("tr[val]")
        , function( e, idx ) {
            return "<tr val='"+$(e).attr('val')+"'>" + $(e).html() + "</tr>";
          }
    );
sorted = orig.sort();
$("tbody").replaceWith(sorted);

如果您的插入是批量操作，则此方法是可行的。如果在插入单个元素后需要立即排序表，则需要在tr元素数组上进行一些二分搜索。

查看sample page。

将行插入到表中，哪些行按某个值属性排序

6 个答案:

标记

的jQuery

Here's a fiddle