html如何对数据排序

在HTML中，可以使用JavaScript对数据进行排序，以下是一个简单的示例，展示了如何使用JavaScript对表格数据进行排序：

（图片来源网络，侵删）

1、创建一个HTML表格，包含一些数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>表格排序示例</title>
</head>
<body>
    <table id="myTable" border="1">
        <thead>
            <tr>
                <th onclick="sortTable(0)">姓名</th>
                <th onclick="sortTable(1)">年龄</th>
                <th onclick="sortTable(2)">城市</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>上海</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>28</td>
                <td>深圳</td>
            </tr>
        </tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>

2、接下来，创建一个名为script.js的JavaScript文件，并编写以下代码：

function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("myTable");
    switching = true;
    dir = "asc";
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i + 1].getElementsByTagName("TD")[n];
            if (dir == "asc") {
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            } else if (dir == "desc") {
                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount++;
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}

这个sortTable函数接受一个参数n，表示要排序的列索引，当用户点击表头时，会触发这个函数，对表格数据进行升序或降序排序。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/452798.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。