Javascript 固定表格表頭

時間 2019-12-02

標籤 javascript 固定表格表頭欄目 JavaScript 简体版

原文原文鏈接

遇到一個簡單的需求: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>