我在浏览器中对 HTML 表格进行排序的方式是使用纯朴的 Javascript。
基本流程是：
- 为每个表头添加一个点击处理程序
- 点击处理程序记录要排序的列的索引
- 表格被转换为数组数组（行和单元格）
- 该数组使用 javascript 排序函数进行排序
- 排序数组中的数据被插入回 HTML 表中
当然，该表应该是漂亮的 HTML。像这样的东西...
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Sioned</td><td>62</td></tr>
<tr><td>Dylan</td><td>37</td></tr>
...etc...
</tbody>
</table>
所以，首先添加点击处理程序......
const table = document.querySelector('table'); //get the table to be sorted
table.querySelectorAll('th') // get all the table header elements
.forEach((element, columnNo)=>{ // add a click handler for each
element.addEventListener('click', event => {
sortTable(table, columnNo); //call a function which sorts the table by a given column number
})
})
这现在不起作用，因为sortTable在事件处理程序中调用的函数不存在。
让我们写...
function sortTable(table, sortColumn){
// get the data from the table cells
const tableBody = table.querySelector('tbody')
const tableData = table2data(tableBody);
// sort the extracted data
tableData.sort((a, b)=>{
if(a[sortColumn] > b[sortColumn]){
return 1;
}
return -1;
})
// put the sorted data back into the table
data2table(tableBody, tableData);
}
所以现在我们解决了问题的核心，我们需要创建函数table2data来从表中取出数据，并data2table在排序后将其放回原处。
他们来了 ...
// this function gets data from the rows and cells
// within an html tbody element
function table2data(tableBody){
const tableData = []; // create the array that'll hold the data rows
tableBody.querySelectorAll('tr')
.forEach(row=>{ // for each table row...
const rowData = []; // make an array for that row
row.querySelectorAll('td') // for each cell in that row
.forEach(cell=>{
rowData.push(cell.innerText); // add it to the row data
})
tableData.push(rowData); // add the full row to the table data
});
return tableData;
}
// this function puts data into an html tbody element
function data2table(tableBody, tableData){
tableBody.querySelectorAll('tr') // for each table row...
.forEach((row, i)=>{
const rowData = tableData[i]; // get the array for the row data
row.querySelectorAll('td') // for each table cell ...
.forEach((cell, j)=>{
cell.innerText = rowData[j]; // put the appropriate array element into the cell
})
});
}
那应该这样做。
您可能希望添加的几件事（或您可能希望使用现成解决方案的原因）：更改排序方向和类型的选项，即您可能希望对某些列进行数字排序（"10" > "2"是错误的，因为它们' 是字符串，可能不是你想要的）。将列标记为已排序的能力。某种数据验证。