遇到一个简单的需求:

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

    给出一些数组a[i],每次询问为li,ri,定义f[li]=a[li],f[li+1]=a[li+1],对于其他不超过ri的位置,f[x]=f[x-1]+a[x]*f[x-2] . 题目有着浓浓的矩阵 ...

  2. Windows通用应用开发手记－Behavior SDK概述

    随着Visual Studio 2013的发布,New Behavior SDK也一起出现了.和Expression Blend SDK相似,包括各种内置行为(behavior和action),可以用 ...

  3. 用函数datepart获取当前日期、周数、季度

    用函数datepart处理就可以了,示例:select datepart(weekday,getdate()) as 周内的第几日select datepart(week,getdate()) as ...

  4. 我的复杂的OpenCV编译之路（OpenCV3.1.0 + VS2010 + Win7）

    教程:www.cnblogs.com/jliangqiu2016/p/5597501.html 这里主要记载我编译遇到的错误及解决方法. OpenCV3.1软件下载:https://sourcefor ...

  5. Ajax跨域请求ashx文件与Webservice文件

    前台页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1 ...

  6. div+css实现各种形状（精心整理）

    1.正方形.div {width: 100px;height: 100px;background: red;} 2.矩形.div {width: 200px;height: 100px;backgro ...

  7. hexo框架-next主题-github搭建个人博客

    IT`huhui 的前言录 我在GITHUB的个人站点:http://ithuhui.cn 这里遇到的很多问题都是亲身解决后写的.还有遇到不懂可以邮件M我 在这里要感谢浮生志的博客教程,很多我一开始不 ...

  8. iis php5.3.8 默认文档无效 404 - 找不到文件或目录

    环境:WIN2008 R2 IIS7.5 / .NET4.X 新开1站点,使用php(5.3.8),默认首页文档已设置为index.php,网站所在目录的网站运行时用户权限正确,应用程序池是asp.n ...

  9. Mac OS X上尝试编译CoreCLR源代码

    CoreCLR登陆GitHub之后,体验CoreCLR首当其冲的方式就是在自己的电脑上编译它,昨天分别在Windows与Linux上成功编译了CoreCLR,详见: 1)Windows上成功编译Cor ...

  10. js 调整排序

    <html> <head> <script type='text/javascript' src='jquery-1.8.2.min.js'></script ...