jquery 固定表头表格-CFANZ编程社区

使用 jQuery 实现固定表头的表格

在 web 开发中，表格常常用于展现丰富的数据，但当表格内容较多时，滚动查看数据可能会造成表头的丢失，从而影响用户的阅读体验。而使用 jQuery 可以轻松实现表头固定的效果，使用户在浏览长表格时始终能看到表头。

什么是固定表头？

固定表头的概念是指在用户滚动浏览表格时，表格的顶部标题行保持在视口内，而其他行可以自由滚动。这种方式在长表格的显示中显得尤为重要，它提升了用户查找和理解信息的效率。

实现步骤

接下来，我们将通过一个简单的示例来演示如何使用 jQuery 实现固定表头的功能。

HTML 部分

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定表头的表格</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="table-container">
        <table id="myTable">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>城市</th>
                    <th>国家</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>小明</td><td>25</td><td>北京</td><td>中国</td></tr>
                <tr><td>小红</td><td>22</td><td>上海</td><td>中国</td></tr>
                <tr><td>John</td><td>30</td><td>New York</td><td>USA</td></tr>
                <!-- 添加更多数据行 -->
            </tbody>
        </table>
    </div>
    <script src="
    <script src="script.js"></script>
</body>
</html>

CSS 部分

在样式部分，我们需要对表格进行一些基本的设置，以便更好地实现固定表头的效果。

.table-container {
    max-height: 300px; /* 设置最大高度 */
    overflow-y: auto; /* 允许纵向滚动 */
}

table {
    width: 100%;
    border-collapse: collapse;
}

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

thead th {
    background-color: #f2f2f2; /* 表头背景颜色 */
    position: sticky; /* 使表头固定 */
    top: 0; /* 固定在顶部 */
}

jQuery 部分

最后，我们在 jQuery 中实现表头固定的逻辑。以下代码确保在滚动时保持表头的固定状态。

$(document).ready(function() {
    var $table = $('#myTable');

    // 获取表头的高度
    var headerHeight = $table.find('thead').outerHeight();
    
    // 监听滚动事件
    $('.table-container').scroll(function() {
        var scrollTop = $(this).scrollTop();
        
        // 控制表头固定的效果
        if (scrollTop > headerHeight) {
            $table.find('thead').css({
                'transform': 'translateY(' + (scrollTop - headerHeight) + 'px)',
                'position': 'absolute',
                'top': (scrollTop - headerHeight) + 'px'
            });
        } else {
            $table.find('thead').css({
                'transform': 'translateY(0)',
                'position': 'relative',
                'top': '0'
            });
        }
    });
});