jquery固定表頭
阿新 • • 發佈：2018-11-16
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery固定表頭表格滾動資料效果</title> <style> @charset "UTF-8";body{font-family: '微軟雅黑',Arial,sans-serif;font-size: 13px;font-style: normal;font-weight: normal;line-height: 21px;} table{border: solid 1px #D5D5D5;border-collapse: collapse;width: 100%;} table td{border: 1px solid #D5D5D5;font-size: 12px;padding: 7px 5px;} table th{background-color: #EEE;border-right: 1px solid #D5D5D5;font-size: 13.5px;line-height: 120%;font-weight: bold;padding: 8px 5px;text-align: left;} </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> (function($){ $.chromatable = { defaults: { width: "900px", height: "300px", scrolling: "yes" } }; $.fn.chromatable = function(options){ var options = $.extend({}, $.chromatable.defaults, options); return this.each(function(){ var $this = $(this); var $uniqueID = $(this).attr("ID") + ("wrapper"); $(this).css('width', options.width).addClass("_scrolling"); $(this).wrap('<div class="scrolling_outer"><div id="'+$uniqueID+'" class="scrolling_inner"></div></div>'); $(".scrolling_outer").css({'position':'relative'}); $("#"+$uniqueID).css({ 'border':'1px solid #CCCCCC', 'overflow-x':'hidden', 'overflow-y':'auto', 'padding-right':'17px' }); $("#"+$uniqueID).css('height', options.height); $("#"+$uniqueID).css('width', options.width); $(this).before($(this).clone().attr("id", "").addClass("_thead").css({ 'width' : 'auto', 'display' : 'block', 'position':'absolute', 'border':'none', 'border-bottom':'1px solid #CCC', 'top':'1px' })); $('._thead').children('tbody').remove(); $(this).each(function( $this ){ if (options.width == "100%" || options.width == "auto") { $("#"+$uniqueID).css({'padding-right':'0px'}); } if (options.scrolling == "no") { $("#"+$uniqueID).before('<a href="#" class="expander" style="width:100%;">Expand table</a>'); $("#"+$uniqueID).css({'padding-right':'0px'}); $(".expander").each( function(int){ $(this).attr("ID", int); $(this).bind ("click",function(){ $("#"+$uniqueID).css({'height':'auto'}); $("#"+$uniqueID+" ._thead").remove(); $(this).remove(); }); }); $("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden"); } }); $curr = $this.prev(); $("thead:eq(0)>tr th",this).each(function(i){ $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width()); }); if (options.width == "100%" || "auto"){ $(window).resize(function(){ resizer($this); }); } }); }; function resizer($this) { $curr = $this.prev(); $("thead:eq(0)>tr th", $this).each( function (i) { $("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width()); }); }; })(jQuery); $(document).ready(function(){ $("#yourTableID").chromatable({ width: "100%", height: "400px", scrolling: "yes" }); }); </script> </head> <body> <table id="yourTableID" width="100%" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>名稱</th> <th>作者</th> <th>備註</th> </tr> </thead> <tbody> <tr> <td>Some content goes in here</td> <td>Praesent vitae ligula nec orci pretium vestibulum</td> <td>Maecenas tempus dictum libero</td> </tr> <tr> <td>Quisque in wisi quis orci tincidunt fermentum</td> <td>Mauris aliquet mattis metus</td> <td>Etiam eu ante non leo egestas nonummy</td> </tr> <tr> <td>Some content goes in here</td> <td>Praesent vitae ligula nec orci pretium vestibulum</td> <td>Maecenas tempus dictum libero</td> </tr> <tr> <td>Quisque in wisi quis orci tincidunt fermentum</td> <td>Mauris aliquet mattis metus</td> <td>Etiam eu ante non leo egestas nonummy</td> </tr> <tr> <td>Some content goes in here</td> <td>Praesent vitae ligula nec orci pretium vestibulum</td> <td>Maecenas tempus dictum libero</td> </tr> <tr> <td>Quisque in wisi quis orci tincidunt fermentum</td> <td>Mauris aliquet mattis metus</td> <td>Etiam eu ante non leo egestas nonummy</td> </tr> <tr> <td>Some content goes in here</td> <td>Praesent vitae ligula nec orci pretium vestibulum</td> <td>Maecenas tempus dictum libero</td> </tr> <tr> <td>Some content goes in here</td> <td>Praesent vitae ligula nec orci pretium vestibulum</td> <td>Maecenas tempus dictum libero</td> </tr> <tr> <td>Quisque in wisi quis orci tincidunt fermentum</td> <td>Mauris aliquet mattis metus</td> <td>Etiam eu ante non leo egestas nonummy</td> </tr> <tr> <td>Some content goes in here</td> <td>Praesent vitae ligula nec orci pretium vestibulum</td> <td>Maecenas tempus dictum libero</td> </tr> <tr> <td>Quisque in wisi quis orci tincidunt fermentum</td> <td>Mauris aliquet mattis metus</td> <td>Etiam eu ante non leo egestas nonummy</td> </tr> </tbody> </table> </body> </html>