用JavaScript对HTML表格进行排序
用JavaScript对HTML表格进行排序
提问于 2013-01-11 05:41:48
我正在寻找一种表排序解决方案(在JavaScript中)，但似乎还找不到合适的解决方案。我只需要它按字母顺序对每一列进行排序。它不需要忽略任何代码或任何数字，也不需要处理货币。只需单击列标题即可将其从已排序的a-z/z-a切换。
有没有人知道这样一个非常简单的解决方案？
回答 11
Stack Overflow用户
发布于 2018-12-21 14:53:39
Nick Grealy's accepted answer很棒，但是如果您的行在<tbody>标记内，那么它的行为就有点奇怪了(第一行不会排序，排序后的行会在tbody标记之外结束，可能会丢失格式)。
然而，这是一个简单的修复方法：
只需更改：
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );至：
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
const tbody = table.querySelector('tbody');
Array.from(tbody.querySelectorAll('tr'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => tbody.appendChild(tr) );Stack Overflow用户
发布于 2016-06-14 22:15:37
我所知道的用javascript对HTML表进行排序的最好方法是使用下面的函数。
只需将要排序的表的id和行上的列号传递给它。它假设您正在排序的列是数字或其中包含数字，并将执行正则表达式替换以获取数字本身(对于货币和其中包含符号的其他数字非常有用)。
function sortTable(table_id, sortColumn){
var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
var rowData = tableData.getElementsByTagName('tr');
for(var i = 0; i < rowData.length - 1; i++){
for(var j = 0; j < rowData.length - (i + 1); j++){
if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, "")) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, ""))){
tableData.insertBefore(rowData.item(j+1),rowData.item(j));
}
}
}
}使用示例：
$(function(){
// pass the id and the <td> place you want to sort by (td counts from 0)
sortTable('table_id', 3);
});Stack Overflow用户
发布于 2013-01-11 05:46:12
您可以处理json数组和sort函数。这是一个非常容易维护的操作结构(例如:排序)。
未经测试，但这是一个想法。这将支持多重排序和顺序排序，如果您传入一个数组，在该数组中将列按其应该排序的顺序放置。
var DATA_TABLE = {
{name: 'George', lastname: 'Blarr', age:45},
{name: 'Bob', lastname: 'Arr', age: 20}
//...
};
function sortDataTable(arrayColNames, asc) { // if not asc, desc
for (var i=0;i<arrayColNames.length;i++) {
var columnName = arrayColNames[i];
DATA_TABLE = DATA_TABLE.sort(function(a,b){
if (asc) {
return (a[columnName] > b[columnName]) ? 1 : -1;
} else {
return (a[columnName] < b[columnName]) ? 1 : -1;
}
});
}
}
function updateHTMLTable() {
// update innerHTML / textContent according to DATA_TABLE
// Note: textContent for firefox, innerHTML for others
}现在假设您需要按姓氏排序，然后按姓名排序，最后按年龄排序。
var orderAsc = true;
sortDataTable(['lastname', 'name', 'age'], orderAsc);它的结果应该类似于：
{name: 'Jack', lastname: 'Ahrl', age: 20},
{name: 'Jack', lastname: 'Ahrl', age: 22},
//...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14267781
复制相关文章
相似问题