遇到一个简单的需求:

客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条
客户希望当表格内容很多时，只滚动表格而不滚动浏览器窗口
在网上找到很多相关的插件，要不就是太复杂，要不就是满足不了我的要求
于是自己动手写了一个简单的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. 内存管理运算符new delete与内存管理函数malloc free的区别——已经他们对对象创建的过程。

    (1)内存管理函数与内存管理运算符的区别 内存管理函数有内存分配函数,malloc calloc realloc 以及内存释放函数free. 内存管理运算符有new 和delete. 两种内存管理方式 ...

  2. [Chapter 3 Process]Practice 3.8: Describe the differences among short-term, medium-term, long-term scheduling

    3.8 Describe the differences among short-term, medium-term, and longterm scheduling. 答案: 长期调度决定哪些进程进 ...

  3. Java集合的运算之减法A-B

    import com.sun.media.sound.SoftSynthesizer; import java.util.*;   public class a123 { public static ...

  4. HDU-3548-Enumerate the Triangles

    求由所有的点组成的三角形中周长最小的三角形的周长 1.将所有的点按横坐标大小排序 2.从第一个点开始往后枚举,判断能否组成三角形,判断当前三角形周长是否小于已经得到的最小周长 代码如下: #inclu ...

  5. Nginx提示502和504错误的解决方案

    一.错误提示说明: Nginx 502 Bad Gateway的含义是请求的PHP-CGI已经执行,但是由于某种原因(一般是读取资源的问题)没有执行完毕而导致PHP-CGI进程终止. Nginx 50 ...

  6. SQL Server 处理树结构数据的一个示例

    没多少技术含量,在简单的系统里应用问题不大: 解决的问题是: 1.树结构数据的表设计: 2.对任意一个节点,找到他所有的上级节点 3.对任意一个节点,找到他所有的下级节点 这里的部分SQL是同事给的, ...

  7. 使用NHibernate（3）-- 用代码代替配置文件

    1,用代码配置Configure类. 上一篇“让代码跑起来”中,是通过在Web.config配置来实现Configure类的,NHibernate还提供了代码的方式. 把之前的配置都注释掉,然后修改A ...

  8. Kali Linux Web 渗透测试— 第二十课-metasploit.meterpreter

    Kali Linux Web 渗透测试— 第二十课-metasploit.meterpreter 原文链接:http://www.xuanhun521.com/Blog/7fc11b7a-b6cb-4 ...

  9. 在console中输出图片

    console.log("%c\n ","font-size:81px;background:url('http://www.baidu.com/img/bdlogo.g ...

  10. Jenkins2 - 下载与启动

    文章来自:http://www.ciandcd.com 文中的代码来自可以从github下载: https://github.com/ciandcd 本文将引导jenkins初学者安装和配置jenki ...