Javascript 固定表格表头
遇到一个简单的需求:
客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条
客户希望当表格内容很多时，只滚动表格而不滚动浏览器窗口
在网上找到很多相关的插件，要不就是太复杂，要不就是满足不了我的要求
于是自己动手写了一个简单的JS方法
思路就是将thead里的tr克隆到tbody里然后将tbody里的首行tr跟thead里的tr大小一致
- 将thead里的表头tr克隆并插入到tbody里
- 将插入到的tbody里的tr内容清除并移除相关属性和大小,仅作为占位使用
- 设置tbody大小及滚动
- 重新设置thead里的表头大小以保证跟tobdy里的首行tr大小一致
<!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>
