遇到一个简单的需求:

客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条
客户希望当表格内容很多时，只滚动表格而不滚动浏览器窗口
在网上找到很多相关的插件，要不就是太复杂，要不就是满足不了我的要求
于是自己动手写了一个简单的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. 数论 ： 模运算法则（poj 1152）

    题目:An Easy Problem! 题意:求给出数的最小进制. 思路:暴力WA: discuss中的idea: 给出数ABCD,若存在n 满足 (A* n^3 +B*n^2+C*n^1+D*n^0 ...

  2. horizon 修改local的logging 配置

    再部署完horizon的开发环境后,首先要做的就是修改下logging的输出. 我用的开发软件是pycharm, 所以,为了方便在 console里看到输出.需要在 /home/geiao/repo/ ...

  3. alt属性

    也被称为alt text, 是当图片无法加载时显示的替代文本.alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要,搜索引擎也会搜索alt属性. 简而言之,每一张图片都应该有一个alt ...

  4. [ACM] hdu 1025 Constructing Roads In JGShining's Kingdom （最长递增子序列，lower_bound使用）

    Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  5. [Leetcode][JAVA] Populating Next Right Pointers in Each Node II

    Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...

  6. (Gym 100685G) Gadget Hackwrench(LCA在线ST)

    Gadget Hackwrench time limit per test 2 seconds memory limit per test 64 megabytes input standard in ...

  7. go protobuf 安装

    1.https://github.com/google/protobuf/releases/tag/v3.0.0 下载需要的版本,如果执行autogen.sh的过程中出现autoreconf not ...

  8. PHP表单处理

    <?php if(isset($_POST['submit'])) { foreach ($_POST["languages"] as $item) { echo " ...

  9. 跟我一起学WCF(1)——MSMQ消息队列

    一.引言 Windows Communication Foundation(WCF)是Microsoft为构建面向服务的应用程序而提供的统一编程模型,该服务模型提供了支持松散耦合和版本管理的序列化功能 ...

  10. 编译nginx的源码安装subs_filter模块

    使用nginx的反向代理功能搭建nuget镜像服务器时,需要针对官方nuget服务器的响应内容进行字符串替换,比如将www.nuget.org替换为镜像服务器的主机名,将https://替换为http ...