jquery,插件固定表格表头

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28254093/article/details/82844050

当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用jQuery做一个插件，目前比较粗糙，不过可以达到相同效果

效果图

使用方式：

• 引入jquery文件

  <script type="text/javascript" src="jquery-1.10.1.min.js"></script>

• 引入插件脚本

<script type="text/javascript" src="jquery.tablefixed.js"></script>

• 对需要固定表头的table调用插件方法 （建议在body元素之后调用）

$(selector).fixedTable({divHeadId:'放表头div的id',divBodyId:'放表歌内容div的id',height:"表格高度",width:"表格宽度"});

     注意：以上方法涉及到的参数可选，建议传递参数 divHeadId 和 divBodyId  。

以下是插件内容

/**
 * 依赖项: 需引入jQuery文件,jquery版本在1.10以上(layui.js要求jquery版本在1.10.0以上)		 (需要手动引用，且必须在当前js插件之前)
 * 作  者: jpw
 * 日  期: 2018-9-25 16:57:07
 * 描  述: 固定现有table的表头
 * 邮  件：[email protected]
 */

;
//闭包限定命名空间
(function ($) {
    

    var defaults={
        /**
         * 高度在整个可见区域的加量
         */
        addHeight:-240,
        /**
         * 承载 table div 的宽度
         */
        width:"100%",
        /**
         * 承载 table div 的高度
         */
        height:"100%",
        /**
         * 承载表头的div id
         */
        divHeadId:"divHead",
        /**
         * 承载表格内容的div id
         */
        divBodyId:"divBody"        
    };
    //扩展jquery 方法
    $.fn.extend({
        /**
         * 
         * 固定table的表头
         * 在需要固定表头的table上 创建固定表头的jquery成员方法 
         */

        fixedTable: function (options,resizeFn) {
            var opt=$.extend({},defaults,options);
            var table=$(this);
            if(table==undefined||table==null){
                throw "调用错误，请使用 $(selector).fixedTable()";
            }
            var currHtml=table[0].outerHTML;
            var height=document.body.clientHeight+opt["addHeight"];
            height=height<=0?0:height;
            height=height+"px";
            
            var div="<div id="+opt["divHeadId"]+" style='width:"+opt["width"]+"'> "+currHtml.replace(/\n|\t|\r\n/g,"").replace(/"/g,"\"").replace(/'/g,"\'").replace(/id=['"][^'"]*['"]/g,"").replace(/name=['"][^'"]*['"]/g,"")+"</div>"+
                    "<div id="+opt["divBodyId"]+" style='overflow:auto;height:"+height+";width:"+opt["width"]+"'>"+currHtml+ "</div>";
               
            table.after(div);
            table.remove();
            $("#"+opt["divHeadId"]).find("tbody").html("");
            $("#"+opt["divBodyId"]).find("thead").html("").hide();
            $("#"+opt["divBodyId"]).css({"height":height});
            $.fn.setWidth(opt["divHeadId"],opt["divBodyId"],opt);
            document.getElementsByTagName("body")[0].onresize =function(){  
                $.fn.setWidth(opt["divHeadId"],opt["divBodyId"],opt);
           }  
           $(window).resize(function(){
           		if(typeof resizeFn=="function"){
           			resizeFn();
           		}else{
					$("#"+opt["divBodyId"]).css("height",(function(){return document.body.clientHeight+opt["addHeight"]+"px";})());
           		}
           	    $.fn.setWidth(opt["divHeadId"],opt["divBodyId"],opt);
           });
        },
        setWidth:function(divHeadId,divBodyId,opt){
            var td=$("#"+divBodyId).find("tbody>tr:eq('0')>td");
            if(td.length<=0){
                return;
            }
            var th=$("#"+divHeadId).find("thead>tr:eq('0')>th");
            th=th.length<=0?$("#"+divHeadId).find("thead>tr:eq('0')>td"):th;
            var j=0;
            for(var i=0;i<td.length;i++){
                var dis=th[j].style.display;                
                if(dis=="none"){
                    j++;
                }
                if(td[i].style.display=="none"){
                    continue;
                }
                h=td[i].style["width"]||td[i].clientWidth;
                if(i>=td.length-1){
                    h+=20;
                }
                h=(h+"").indexOf("px")<=0?h+"px":h;
                th[j].style["width"]=h;
				console.log(h);
                j++;
            }

        }
    });
})(window.jQuery);

资源链接 去下载