html实现表格排序算法?

73次阅读
没有评论

HTML本身并不提供表格排序的算法,但可以使用JavaScript来实现。以下是一个简单的表格排序算法示例:

HTML代码:

<table id="myTable">
    <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>23</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Mike</td>
        <td>32</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Sara</td>
        <td>29</td>
        <td>Australia</td>
    </tr>
    </tbody>
</table>

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函数会被调用,该函数使用冒泡排序算法按照表头中对应列的值对表格行进行排序。排序方式取决于当前排序状态和点击的表头。

完整示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Image Blur Example</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }

        tr:hover {
            background-color: #f5f5f5;
        }
    </style>

</head>
<body>
<table id="myTable">
    <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>23</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Mike</td>
        <td>32</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Sara</td>
        <td>29</td>
        <td>Australia</td>
    </tr>
    </tbody>
</table>


</body>
<script>
    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;
                }
            }
        }
    }
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
</html>
正文完
 
评论(没有评论)