HTML表排序自定义列排序

<table id="myTable">
    <thead>
        <tr>
            <th>姓名 <button onclick="sortTable(0)">排序</button></th>
            <th>年龄 <button onclick="sortTable(1)">排序</button></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Alice</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>22</td>
        </tr>
    </tbody>
</table>

function sortTable(column) {
    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")[column];
            y = rows[i + 1].getElementsByTagName("TD")[column];
            // 检查是否需要根据数字或文本排序
            if (!isNaN(x.innerHTML) && !isNaN(y.innerHTML)) { // 数字排序
                if (parseInt(x.innerHTML) > parseInt(y.innerHTML)) {
                    shouldSwitch = true;
                    break;
                }
            } else { // 文本排序
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            // 如果需要交换，则交换并标记switching为true
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
        }
    }
}