使用jQuery/JavaScript对表格行进行排序

基础概念

表格行排序是指根据某一列或多列的数据对表格中的行进行重新排列。在前端开发中，这通常通过JavaScript或jQuery来实现，以提供更好的用户体验。

类型

单列排序：根据表格中的一列数据进行排序。
多列排序：根据多列数据进行排序，优先级从左到右。
自定义排序：允许用户定义自己的排序规则。

应用场景

数据分析工具：如Excel类似的在线工具。
电商网站：按价格、销量等排序商品列表。
管理后台：对用户、订单等数据进行排序查看。

示例代码

以下是一个使用jQuery和JavaScript实现表格行排序的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table Sorting</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable" border="1">
    <thead>
    <tr>
        <th onclick="sortTable(0)">Name</th>
        <th onclick="sortTable(1)">Age</th>
        <th onclick="sortTable(2)">Country</th>
    </tr>
    </thead>
    <tbody>
    <tr><td>John</td><td>25</td><td>USA</td></tr>
    <tr><td>Anna</td><td>30</td><td>Canada</td></tr>
    <tr><td>Matthew</td><td>28</td><td>Australia</td></tr>
    </tbody>
</table>

<script>
function sortTable(columnIndex) {
    var table, rows, switching, i, x, y, shouldSwitch;
    table = document.getElementById("myTable");
    switching = true;
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[columnIndex];
            y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                shouldSwitch = true;
                break;
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
        }
    }
}
</script>
</body>
</html>