表格添加固定表头，js 实现 tableFixedHead.js

本文链接：https://blog.youkuaiyun.com/gnolzhao/article/details/78143144

这是一个JavaScript插件，通过复制THEAD元素并创建一个固定头部的div，实现表格固定表头的效果。代码中包括如何处理滚动条、宽度同步等细节，适用于需要在表格滚动时保持表头可见的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
        * Auther:zhaohailong
        * Date: 2017-09-05
        */
        /*
        主要思想：
        1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
        2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
        */
        (function ($) {
            $.fn.extend({
                FixedHead: function (options) {
                    var op = $.extend({ tableLayout: "auto" }, options);
                    return this.each(function () {
                        var $this = $(this); //指向当前的table
                        var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
						
						//以防重复调用多次生成
						if($thisParentDiv.siblings(".fixedheadwrap").length>0){
							//alert($thisParentDiv[0].clientWidth+"     "+$thisParentDiv.siblings(".fixedheadwrap")[0].clientWidth);
							//if($thisParentDiv[0].clientWidth!=$thisParentDiv.siblings(".fixedheadwrap")[0].clientWidth){
							//	$thisParentDiv.siblings(".fixedheadwrap").css("width",$thisParentDiv[0].clientWidth);
							//}
							$thisParentDiv.siblings(".fixedheadwrap").remove();
							
							//$thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
							var x = $thisParentDiv.position();

							var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
							.insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
							.css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });

							var $thisClone = $this.clone(true);
							$thisClone.removeAttr("id");//去掉属性id(dom中不能存在多个相同的id)
							$thisClone.removeAttr("name");//去掉属性(dom中不能存在多个相同的name)
							$thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
							$thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中

							$this.css({ "marginTop": 0, "table-layout": op.tableLayout });
							//当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
							$thisParentDiv.scroll(function () {
								fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
							});

							//因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
							//下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
							var $fixHeadTrs = $thisClone.find("thead tr");
							var $orginalHeadTrs = $this.find("thead");
							$fixHeadTrs.each(function (indexTr) {
								var $curFixTds = $(this).find("td");
								var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
								$curFixTds.each(function (indexTd) {
									$(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
								});
							});
						}else{
							$thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
							var x = $thisParentDiv.position();

							var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
							.insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
							.css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });

							var $thisClone = $this.clone(true);
							$thisClone.removeAttr("id");//去掉属性id(dom中不能存在多个相同的id)
							$thisClone.removeAttr("name");//去掉属性(dom中不能存在多个相同的name)
							$thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
							$thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中

							$this.css({ "marginTop": 0, "table-layout": op.tableLayout });
							//当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
							$thisParentDiv.scroll(function () {
								fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
							});

							//因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
							//下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
							var $fixHeadTrs = $thisClone.find("thead tr");
							var $orginalHeadTrs = $this.find("thead");
							$fixHeadTrs.each(function (indexTr) {
								var $curFixTds = $(this).find("td");
								var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
								$curFixTds.each(function (indexTd) {
									$(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
								});
							});
						}
						
                    });
                }
            });
        })(jQuery);