表格頭部與左側內容隨滾動條位置改變而改變（基於jQuery）

時間 2020-07-23

原文原文鏈接

效果圖以下：css

HTML代碼：html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格頭部與左側內容隨滾動條位置改變而改變（基於jQuery）</title>
    <style> * { margin: 0; padding: 0;
        } .display-none { display: none;
        } .container { width: 600px; height: 600px; overflow: auto;
        } .content { width: 3000px; height: 1200px;
        } table { position: relative; border-collapse: collapse; font-size: 13px;
        } table, td, th { text-align: left; line-height: 40px; border: 1px solid black;
        } table th { background-color: #ededed;
        } .copyThead { position: absolute; top: 0; left: 1px; background-color: #ededed; width: 100%;
        } .copyThead th:first-child { border-left: 0;
        } .copyMenu { position: absolute; top: 0; left: 0; background-color: #ededed;
        } .position-th { position: absolute; top: 0; left: 0; background-color: #ededed;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <table>
                <thead>
                    <tr></tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="./data.js"></script>
    <script> $(function(){ // 渲染表頭
 let thHtml = '<th width="150" class="fixed-th">編號/姓名 技能</th>'; data.staff.forEach(function(item, index) { thHtml += `<th width="100">${item.staffNumber} ${item.userName}</th>`;
 }) $('table thead tr').html(thHtml); // 獲取第一個表頭的寬高
 let fixedThWidth = $('.fixed-th').width(); let fixedThHeight = $('.fixed-th').height(); // 渲染表單內容
            function renderTableBody() { let tdHtml = ''; data.project.forEach(function(item, index) { // 第一列
 tdHtml += `<tr>
                            <th width="150">${item.projectName}</th>
 `; // 其他列
                    for(let i = 0; i < data.staff.length; i++){ tdHtml += `<td></td>`;
 } tdHtml += '</tr>'; }) $('table tbody').html(tdHtml); } renderTableBody(); // 設置content的寬度未table的寬度
 $('.content').css('width', $('table').width() + 'px'); // 複製頭部內容
 let theadHtml = $('table thead').clone().addClass('copyThead display-none'); $('table').append(theadHtml); // 複製左側內容
            function copyLeftContent() { let leftMenuHtml = `<tbody class="copyMenu display-none">
                                        <th width="150" class="fixed-th">編號/姓名 技能</th>
                                        <th width="150" class="fixed-th position-th">編號/姓名 技能</th>`; data.project.forEach(function(item, index){ leftMenuHtml += `<tr>
                                        <th width="150">${item.projectName}</th>
                                    </tr>`;
 }) leftMenuHtml += '</tbody>'; $('table').append(leftMenuHtml); } copyLeftContent(); // 設置好第一個表頭的高度
 $('.fixed-th').css('height', fixedThHeight + 'px'); // 設置左側內容中的位置可變的第一個表頭的行高
 $('.position-th').css('line-height', fixedThHeight + 'px'); // 監聽表格內容滾動事件
 $('.container').scroll(function(){ let nowScrollTop = $(this).scrollTop(); //獲取滾動條距頂部位置
 let nowScrollLeft = $(this).scrollLeft(); //獲取滾動條距左部位置
                if(nowScrollTop > fixedThHeight){ //上下滾動位置是否已大於表頭的高度 大於顯示並設定top值 小於隱藏
 $('.copyThead').removeClass('display-none').css('top', nowScrollTop); $('.position-th').css('top', nowScrollTop); }else{ $('.copyThead').addClass('display-none').css('top', 0); $('.position-th').css('top', 0); } if(nowScrollLeft > fixedThWidth){ //左右滾動位置是否已大於左側內容的寬度 大於顯示並設定left值 小於隱藏
 $('.copyMenu').removeClass('display-none').css('left', nowScrollLeft); }else{ $('.copyMenu').addClass('display-none').css('left', 0); } }) }) </script>
</body>
</html>

data.js代碼：jquery

var data = { "status": 100, "msg": "操做成功", "projectTotal": 2900, "total": 2900, "project": [ { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" }, { "projectId": 46533, "projectName": "天馬流星拳好厲害" } ], "staff": [ { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" }, { "staffNumber": "465132132465", "userId": 453134, "userName": "哆啦A夢" } ] }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。