html固定表頭，表單內容垂直迴圈滾動
阿新 • • 發佈：2019-01-05
專案中需要實現一個html頁面，頁面中的table內容垂直滾動顯示資料，如下圖所示：
下面記錄實現以上功能的程式碼：
以上實現的方法中表頭沒有使用table中的th，而是直接用div實現的表頭，這樣便於控制內容的滾動。<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <style type="text/css"> .content { width: 500px; margin: 50px 50px; } .header { line-height: 50px; background-color: #ECECEC; } .data { height: 300px; overflow: hidden; } </style> </head> <body> <div class="content"> <div class="header row"> <div class="col-md-3">姓名</div> <div class="col-md-3">性別</div> <div class="col-md-3">年齡</div> <div class="col-md-3">職業</div> </div> <div class="data"> <div class="data-content"> <table class="table table-hover"> </table> </div> <div class="data-footer"></div> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script type="text/javascript"> var html = ''; for(var i = 0; i < 15; i++) { html += '<tr>'; html += '<td>張三' + i + '</td>'; if(i % 2 == 0) { html += '<td>男</td>'; } else { html += '<td>女</td>'; } html += '<td>' + (10 + i) + '</td>'; html += '<td>程式設計師</td>'; html += '</tr>'; } $('.table').html(html); $('td').addClass('col-md-3'); var dataDOM = $('.data')[0]; var dataContentDOM = $('.data-content')[0]; var dataFooterDOM = $('.data-footer')[0]; var height = dataDOM.offsetTop + dataDOM.offsetHeight; setInterval(function() { if(dataFooterDOM.offsetTop - dataDOM.scrollTop - height <= 0) { dataDOM.scrollTop -= dataContentDOM.offsetHeight; } else { dataDOM.scrollTop++; } }, 20); </script> </body> </html>