遇到一个简单的需求:

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

    让EditText不自动获取焦点,只需要在EditText的父控件加上 android:focusable="true"android:focusableInTouchMode=& ...

  2. MHA安装手记

    安装MHA服务器和客户端 # yum install perl-DBD-MySQL 在manager节点上: # yum install perl-DBD-MySQL # yum install pe ...

  3. SQL优化笔记—CPU优化

    补充:常规服务器动态管理对象包括,下面有些资料可能会应用到 dm_db_*:数据库和数据库对象dm_exec_*:执行用户代码和关联的连接dm_os_*:内存.锁定和时间安排dm_tran_*:事务和 ...

  4. Linux内核分析之跟踪分析Linux内核的启动过程

    一.实验过程 使用实验楼虚拟机打开shell cd LinuxKernel/ qemu -kernel linux-/arch/x86/boot/bzImage -initrd rootfs.img ...

  5. Java实验二20135104

    课程:Java程序设计          班级: 1351 姓名:刘帅                学号:20135104 成绩:             指导教师:娄嘉鹏       实验日期:2 ...

  6. How to configure windows machine to allow file sharing with dns alias (CNAME)

    Source: http://serverfault.com/questions/23823/how-to-configure-windows-machine-to-allow-file-sharin ...

  7. xvfb启动PyQt4程序报Unable to load library icui18n错误

    xvfb启动PyQt4程序报如下错误: Unable to load library icui18n "Cannot load library icui18n: (libicui18n.so ...

  8. 作死遇到的坑－－view向下偏移

    好大一个坑.--谈谈view偏移问题: 先上张图, 图中白色部分.上面的是从网上找的资源.将导航栏隐藏之后用collectionView加上去而实现的滑动标签功能.开始以为是代码中的问题.然后仔细推敲 ...

  9. Android--入门

    之前自己在学校写过一些安卓应用,那时候没有系统地学过安卓,用到什么就网上找博客.找Demo,然后自己跟着敲一遍,有些东西也不太理解,现在打算做android开发这一块了,趁毕业之前赶紧多学些技术.先是 ...

  10. 使用OpenCV3处理图像

    不同色彩空间的转换 当前,在计算机视觉中有三种常用的色彩空间:灰度.BGR.以及HSV(Hue,Saturation,Value) 灰度色彩空间是通过去除彩色信息来将其转换成灰阶,灰度色彩空间对中间处 ...