在没有插件的情况下,可以使用 jQuery 对表格进行排序。以下是一个简单的示例,演示如何使用 jQuery 对表格进行排序:
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>90</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>75</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('#myTable th').click(function() {
var table = $(this).parents('table').eq(0);
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));
this.asc = !this.asc;
if (!this.asc) {
rows = rows.reverse();
}
for (var i = 0; i< rows.length; i++) {
table.append(rows[i]);
}
});
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index);
var valB = getCellValue(b, index);
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
}
}
function getCellValue(row, index) {
return $(row).children('td').eq(index).text();
}
});
这段代码会在表头点击时,根据点击的列对表格进行排序。可以根据需要修改代码以满足特定需求。
领取专属 10元无门槛券
手把手带您无忧上云