jquery简单表格特效

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 表格特效通常指的是使用 jQuery 来实现表格的动态效果，如排序、分页、筛选、行展开/折叠等。

类型

排序：允许用户通过点击表头来对表格数据进行排序。
分页：将大量数据分成多个页面显示，提高用户体验。
筛选：允许用户通过输入关键字来筛选表格中的数据。
行展开/折叠：允许用户点击某一行来展开或折叠详细信息。
动态添加/删除行：允许用户动态地向表格中添加或删除行。

应用场景

数据密集型应用，如报表系统、数据分析工具等。
需要用户交互的网站，如电商网站的商品列表、社交网络的用户列表等。
管理后台系统，如用户管理、订单管理等。

示例代码

以下是一个简单的 jQuery 表格排序示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Table Sort</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>30</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>25</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td>Charlie</td>
                <td>35</td>
                <td>Chicago</td>
            </tr>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $('#myTable th').click(function() {
                var table = $(this).parents('table').eq(0);
                var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));
                this.asc = !this.asc;
                if (!this.asc) {
                    rows = rows.reverse();
                }
                for (var i = 0; i < rows.length; i++) {
                    table.append(rows[i]);
                }
            });

            function comparer(index) {
                return function(a, b) {
                    var valA = getCellValue(a, index), valB = getCellValue(b, index);
                    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB);
                };
            }

            function getCellValue(row, index) {
                return $(row).children('td').eq(index).text();
            }
        });
    </script>
</body>
</html>