使用 Javascript 或 jQuery 按第一列对表格进行快速排序 [英] Sort a table fast by its first column with Javascript or jQuery
问题描述
我有一个从 FullCalendar 动态填充的表格.问题在于 FullCalendar 不关心它的原始顺序.
I have a table which is dynamically populated from FullCalendar.
The problem is that FullCalendar does not care about its original order.
表格如下所示:
<table id="caltbl">
<thead>
<tr> <th> </th> <th> Date </th> <th> hours </th> ... </tr>
</thead>
<tbody>
<tr> <td class="sortnr">1</td> <td></td> ... </tr>
<tr> <td class="sortnr">3</td> <td></td> ... </tr>
<tr> <td class="sortnr">2</td> <td></td> ... </tr>
<tr> <td class="sortnr">4</td> <td></td> ... </tr>
</tbody>
</table>
每行的第一行包含表格应根据其排序的数字.
The first of each row contains the number on which the table should be sorted.
我有这个代码来排序:
var rows = $('#caltbl > tbody').children('tr').detach();
for (var counter = 1; counter<=rows.length; counter++) {
$(rows).each(function(index) {
if ($(this).find(".sortnr").text()==counter){
$('#caltbl > tbody:last').append($(this));
}
});
}
这在 Firefox 中运行良好，但在 Internet Explorer 中让我非常头疼，因为有 500 多个项目并且它挂起.我可以添加一个 setTimeout 但这并不能解决真正的问题.排序很慢.对此进行排序的更快方法是什么?
This works fine in Firefox but causes me a major headache in Internet Explorer because there are more than 500 items and it hangs. I could add a setTimeout but that would not fix the real problem. The sorting is slow. What is a faster way to sort this?
不必从 Instead of having to start from the Fiddle: http://jsfiddle.net/qNwDe/ 我编写了一种高效的跨浏览器方法来对表中的行进行排序.双循环中的多个 JQuery 选择器会导致严重的性能问题(如您所见)，因此我已经摆脱了 JQuery. I've written an efficient, cross-browser method to sort the rows in your table. Multiple JQuery selectors in double loops are causing serious performance issues (as you've noticed), hence I've get rid of JQuery. 我的函数的另一个优点是它不介意丢失索引号.我目前指的是每行的第一个单元格，而不是按类名获取元素.如果你想通过类名引用，我会改变我的功能: An additional advantage of my function is that it doesn't mind missing index numbers. I'm currently referring to the first cell of each row, rather than getting the element by class name. If you want to refer by classname, I will alter my function: 只要你想对表格进行排序，就调用 Call 这篇关于使用 Javascript 或 jQuery 按第一列对表格进行快速排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ html 开始，正如我所说，它是动态填充的，所以我有一个包含 html 的
Array.每个 (未排序)
<table> html, as I said it gets populated dynamically so I have an Array which contains the html. 1 item per <tr> (unsorted)推荐答案
function sortTable(){
var tbl = document.getElementById("caltbl").tBodies[0];
var store = [];
for(var i=0, len=tbl.rows.length; i<len; i++){
var row = tbl.rows[i];
var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
if(!isNaN(sortnr)) store.push([sortnr, row]);
}
store.sort(function(x,y){
return x[0] - y[0];
});
for(var i=0, len=store.length; i<len; i++){
tbl.appendChild(store[i][1]);
}
store = null;
}
sortTable().sortTable() whenever you want to sort the table.
登录
关闭
