jquery 表格特效

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。表格特效通常指的是使用 jQuery 来增强 HTML 表格的视觉效果和交互性。

类型

排序和过滤：允许用户通过点击表头来对表格数据进行排序，或者通过输入框来过滤数据。
分页：将大量数据分成多个页面显示，提高用户体验。
行展开/折叠：点击某一行时，可以展开显示更多详细信息。
动态添加/删除行：允许用户在表格中动态添加或删除行。
高亮显示：根据某些条件（如鼠标悬停、选中行等）高亮显示表格行。

应用场景

数据密集型应用：如电商网站的商品列表、金融应用的交易记录等。
管理后台：如管理员查看用户列表、订单管理等。
报表系统：如数据分析、销售报表等。

示例代码

以下是一个简单的 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>John</td>
                <td>25</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>30</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td>Mike</td>
                <td>28</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);
                    var 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>

遇到的问题及解决方法

问题：表格排序不正确

原因：可能是由于数据类型不一致导致的排序错误，例如数字和字符串混合在一起。

解决方法：在比较函数中添加类型检查和转换逻辑，确保数字类型的列按数字排序，字符串类型的列按字符串排序。

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