如何通过JavaScript实现动态表格排序？

// 假设这是我们的HTML表格
/*
<table id="mySortableTable" border="1">
    <thead>
        <tr>
            <th data-type="string">姓名</th>
            <th data-type="number">年龄</th>
            <th data-type="string">城市</th>
            <th data-type="date">注册日期</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>张三</td><td>25</td><td>北京</td><td>2023-01-15</td></tr>
        <tr><td>李四</td><td>30</td><td>上海</td><td>2022-11-20</td></tr>
        <tr><td>王五</td><td>22</td><td>广州</td><td>2024-03-01</td></tr>
        <tr><td>赵六</td><td>28</td><td>深圳</td><td>2023-07-08</td></tr>
        <tr><td>钱七</td><td>25</td><td>北京</td><td>2023-02-28</td></tr>
    </tbody>
</table>
*/

document.addEventListener('DOMContentLoaded', () => {
    const table = document.getElementById('mySortableTable');
    if (!table) return;

    const headers = table.querySelectorAll('th');
    const tbody = table.querySelector('tbody');
    let currentSortColumn = -1;
    let sortDirection = 'asc'; // 'asc' for ascending, 'desc' for descending

    headers.forEach((header, index) => {
        header.addEventListener('click', () => {
            const dataType = header.dataset.type; // 获取数据类型，如 'string', 'number', 'date'

            // 如果点击的是当前已排序的列，则反转排序方向
            if (currentSortColumn === index) {
                sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
            } else {
                // 否则，重置为升序，并更新当前排序列
                currentSortColumn = index;
                sortDirection = 'asc';
            }

            // 清除其他列的排序指示
            headers.forEach(h => h.removeAttribute('aria-sort'));
            // 设置当前列的排序指示
            header.setAttribute('aria-sort', sortDirection === 'asc' ? 'ascending' : 'descending');


            const rows = Array.from(tbody.querySelectorAll('tr'));

            rows.sort((rowA, rowB) => {
                const cellA = rowA.children[index].textContent.trim();
                const cellB = rowB.children[index].textContent.trim();

                let comparison = 0;

                switch (dataType) {
                    case 'number':
                        comparison = parseFloat(cellA) - parseFloat(cellB);
                        break;
                    case 'date':
                        const dateA = new Date(cellA);
                        const dateB = new Date(cellB);
                        comparison = dateA.getTime() - dateB.getTime();
                        break;
                    case 'string':
                    default:
                        // 使用localeCompare进行字符串比较，支持国际化
                        comparison = cellA.localeCompare(cellB);
                        break;
                }

                return sortDirection === 'asc' ? comparison : -comparison;
            });

            // 移除所有旧的行
            while (tbody.firstChild) {
                tbody.removeChild(tbody.firstChild);
            }

            // 添加排序后的行
            rows.forEach(row => tbody.appendChild(row));
        });
    });
});

// ... 在排序逻辑中
// 清除所有表头的视觉排序指示
headers.forEach(h => {
    h.classList.remove('sort-asc', 'sort-desc');
    h.removeAttribute('aria-sort'); // 确保清除ARIA属性
});

// 添加当前排序列的视觉指示和ARIA属性
header.classList.add(sortDirection === 'asc' ? 'sort-asc' : 'sort-desc');
header.setAttribute('aria-sort', sortDirection === 'asc' ? 'ascending' : 'descending');
// ...

th {
    cursor: pointer;
    position: relative;
    padding-right: 20px; /* 为箭头留出空间 */
}

th.sort-asc::after {
    content: ' ▲'; /* 向上箭头 */
    position: absolute;
    right: 5px;
    color: #007bff;
}

th.sort-desc::after {
    content: ' ▼'; /* 向下箭头 */
    position: absolute;
    right: 5px;
    color: #007bff;
}