Javascript 固定表格表头
遇到一个简单的需求:
客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条
客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口
在网上找到很多相关的插件,要不就是太复杂,要不就是满足不了我的要求
于是自己动手写了一个简单的JS方法
思路就是将thead里的tr克隆到tbody里然后将tbody里的首行tr跟thead里的tr大小一致
- 将thead里的表头tr克隆并插入到tbody里
- 将插入到的tbody里的tr内容清除并移除相关属性和大小,仅作为占位使用
- 设置tbody大小及滚动
- 重新设置thead里的表头大小以保证跟tobdy里的首行tr大小一致
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Document</ title > < style > /*自定义行强制显示*/ #hide_tr{display: table-row!important;} /*自定义占位,但不显示大小及内容*/ #hide_tr *{margin-top: 0;margin-bottom: 0;padding-top: 0;padding-bottom: 0;border-top: 0;border-bottom: 0;height: 0;} </ style > </ head > < body > < table id="MyTable" style="width:960px;font-family:微软雅黑;color:#000;font-size:medium;border-color:black" border="1" cellspacing="0" cellpadding="0"> < thead > < tr > < th >姓名</ th > < th >语文</ th > < th >数学</ th > < th >英语</ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ body > < script src='http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js'></ script > < script > /** * @Author: HTL * @Email: Huangyuan413026@163.com * @DateTime: 2016-12-26 15:05:55 * @Description: 固定表格的表头 * 宽度为表格的宽,高度为不含滚动条浏览器的高度 */ function fix_table($obj){ if(!$obj || $obj.length<=0 || ($('html').height() - $(window).height())< 0 ) return false; $obj.show(); //最大高度为不包含滚动条的高度 var height = $obj.find('tbody').height() - ($('html').height() - $(window).height()) - 3; //设置表格内容高度和宽度 $obj.find('tbody').css({'max-width': $obj.width(),'overflow':'auto','max-height':height}); //移出复制的表头并重新添加 $obj.find("#hide_tr").remove(); //内容宽度自适应 $obj.find('thead tr th').css('width','auto'); // 表头复制并插入到内容 $obj.find('tbody tr:first').before($obj.find('thead tr').clone()); var _th = $obj.find('thead th'); //移出内容的行信息并设置跟表头一样的宽度 $obj.find('tbody tr:first th').each(function(i,j){ $(this).html('').width($(_th[i]).innerWidth());}); //表格第一行内容不显示仅占位 $obj.find('tbody tr:first').attr('id','hide_tr').css('display','table-row'); //显示滚动条 $obj.find('tbody,thead tr,tfoot tr').css('display','block'); //表格内容宽 _th = $obj.find('tbody th'); //表头th宽跟内容th宽一致 $obj.find('thead tr:first th').each(function(i,j){ $(this).width($(_th[i]).width());}); //页脚th宽跟内容th宽一致 $obj.find('tfoot tr:first th').each(function(i,j){ $(this).width($(_th[i]).width());}); } $(function(){ var html = '',tr='<tr>< td >学生#index#</ td >< td >#1#</ td >< td >#2#</ td >< td >#3#</ td ></ tr >'; for(var i=1;i<=100;i++){ html += tr.replace("#index#",i).replace("#1#",10).replace("#2#",20).replace("#3#",30); } $("#MyTable tbody").html(html); fix_table($("#MyTable")); }); </ script > </ html > |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步