jquery,插件固定表格表头

admin管理员组

文章数量:1122855

jquery,插件固定表格表头

当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用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的表头* 邮  件：1427953302@qq*/;
//闭包限定命名空间
(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);

资源链接 去下载

本文标签： jQuery插件固定表格表头