遇到一个简单的需求:

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

　　

Javascript 固定表格表头的更多相关文章

  1. css固定表格表头(各浏览器通用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生javascript 固定表头原理与源码

    我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫  "freeze- ...

  3. 重构一段基于原生JavaScript的表格绘制代码

    为了在CardSimulate项目中方便的显示技能和效果列表,决定重构以前编写的一段JavaScript代码——att表格绘制库,这段代码的作用是将特定的JavaScript数据对象转化为表格,支持精 ...

  4. DataTables固定表格宽度（设置横向滚动条）

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

  5. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  6. day36—javascript对表格table的操作应用（一）

    转行学开发,代码100天——2018-04-21 今天记录一下,JavaScript对表格table的操作应用,包括表格元素的获取,创建,删除等. 一个普通的完整表格包括以下几个部分:table-&g ...

  7. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

  8. Javascript合并表格相同内容单元格示例

    效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  9. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

随机推荐

  1. DevExpress组件之——PopupMenu组件(转)

    出处:http://www.cnblogs.com/xlx0210/archive/2010/07/14/1777366.html 目录在项目中使用了第三方控件DevExpress,得开始研究其他控件 ...

  2. VB.NET读取Excel工作表信息

    Dim dt As DataTable = ExcelConn.GetOleDbSchemaTable(OleDb.OleDbSchemaGuid.Tables, Nothing)

  3. python基础整理笔记（二）

    一. 列表 1. 创建实例: a = [1,2,3] b = list() 2. 主要支持的操作及其时间复杂度如下: 3. 其他 python中的列表,在内存中实际存储的形式其实是分散的存储,比较类似 ...

  4. 隐马尔科夫模型HMM学习最佳范例

    谷歌路过这个专门介绍HMM及其相关算法的主页:http://rrurl.cn/vAgKhh 里面图文并茂动感十足,写得通俗易懂,可以说是介绍HMM很好的范例了.一个名为52nlp的博主(google ...

  5. JAVA的JNI调用

    由于JNI调用C和调用C++差不多,而且C++中可以混合写C代码,所以这里主要是写关于JNI调用C++的部分. 一般步骤: 先是写普通的Java类,其中包括本地方法调用.  然后编译这个Java类,调 ...

  6. 开源IP代理池续——整体重构

    开源IP代理池 继上一篇开源项目IPProxys的使用之后,大家在github,我的公众号和博客上提出了很多建议.经过两周时间的努力,基本完成了开源IP代理池IPProxyPool的重构任务,业余时间 ...

  7. linux下卸载mysql

    卸载mysql rpm -qa|grep -i mysql rpm -ev MySQL-server-4.0.14-0 MySQL-client-4.0.14-0 卸载后/var/lib/mysql中 ...

  8. Dynamic CRM 2013学习笔记（二十一）自定义审批流2 - 配置按钮

    上次介绍了 Dynamic CRM 2013学习笔记(十九)自定义审批流1 - 效果演示 现在开始介绍如何配置审批流,首先在form上添加三个按钮,Submit, Agree, Reject: 1. ...

  9. asp.net froms 移动平台（iphone 微信）无法存储的解决办法。

    更改form的默认设置,让系统不再根据设备来判断是否支持cookie 在站点的配置文件中有关于Form认证的配置,在配置<authentication mode="Forms" ...

  10. node-webkit教程(10)Platform Service之File dialogs

    node-webkit教程(10)Platform Service之File dialogs 文/玄魂 目录 node-webkit教程(10)Platform Service之File dialog ...