jQuery 动态表格排序技术教程
本教程将教你如何使用 jQuery 实现表格的动态排序功能。
详细案例讲解
| 姓名 ↓ | 年龄 ↓ | 城市 ↓ |
|---|---|---|
| 张三 | 28 | 北京 |
| 李四 | 22 | 上海 |
| 王五 | 34 | 广州 |
| 赵六 | 25 | 深圳 |
function sortTable(columnIndex) {
var table = $(‘#sortableTable tbody’);
var rows = table.find(‘tr’).toArray().sort(function (a, b) {
var A = $(a).children(‘td’).eq(columnIndex).text().toUpperCase();
var B = $(b).children(‘td’).eq(columnIndex).text().toUpperCase();
if ($.isNumeric(A) && $.isNumeric(B)) {
return Number(A) – Number(B);
} else {
return (A B) ? 1 : 0;
}
});
$.each(rows, function (index, row) {
table.append(row);
});
// Toggle arrow direction
var th = $(‘#sortableTable thead tr th’).eq(columnIndex);
if (th.hasClass(‘arrow-down’)) {
th.removeClass(‘arrow-down’);
th.addClass(‘arrow-up’);
} else {
th.removeClass(‘arrow-up’);
th.addClass(‘arrow-down’);
}
}
// Initial arrow setup
$(‘#sortableTable thead tr th’).on(‘click’, function () {
$(‘#sortableTable thead tr th’).removeClass(‘arrow-up arrow-down’);
$(this).addClass(‘arrow-down’);
});
总结
通过上述方法，你可以轻松地为你的网页表格添加动态排序功能。这种方式不仅提高了用户体验，还使数据展示更加直观。
