我有一个简单的 HTML 表，我想用 JQuery 向表中插入新行。
每行都有一个自定义val属性，其中包含 UNIX 时间戳，例如：
<tr data-val="1356998400"><!-- Some row content --></tr>
我想用 JQuery 插入新行，我希望它们val在插入后按属性排序。
obviuos 解决方案是将id-s 设置为 rows 并在每次插入之前手动扫描 rows 数组（执行时间值比较）以找到正确的插入位置，但可能有更多类似 JQuery 的解决方案？我想这种情况应该存在一种单线解决方案。
最初，您可以使用基本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>
$('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 插件。
我有一个tablesorter的分支，它允许您编写一个解析器，该解析器可以从表格单元格中提取数据属性，并为每一列分配特定的 textExtraction。
代码 ：
$(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' }
}
});
});
如果要根据valeach 上的属性值进行排序<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 插件。
另一种解决方案：使用http://api.jquery.com/children/获取所有 tr 元素（不需要 Id）检查值并重新排列它们。如果它们的顺序正确，请删除您的表格内容并重新插入您的行。
（甚至不需要清除表并重新插入所有行。如果您编写正确的循环逻辑， http://api.jquery.com/insertAfter/使您能够在正确的两个值之间插入一行）
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元素数组进行一些二等分搜索。
看看示例页面。