采用jQuery实现固定表头
openkk
13年前
用JQuery写的固定表头插件，可实现DIV容器内部固定表头，可固定在页面中的顶部。 <pre class="brush:javascript; toolbar: true; auto-links: false;">/* 功能說明: 固定表頭。 創建人: hmj 創建時間: 2011-06-29 功能：固定表頭。 使用容器的ID進行設定$("#div").chromatable({width: "100%",height: "100%", scrolling: "yes"}) table必須包含有<thead>標籤 參數：無。 */ (function($){ $.chromatable = { defaults: { width: "900px", //設定容器寬度,待擴展程式 height: "300px", //設定容器高度,待擴展程式 scrolling: "yes" //yes跟隨IE滾動條而滑動, no固定在頁面上僅容器滾動條滑動 } }; $.fn.chromatable = function(options){ var options = $.extend({}, $.chromatable.defaults, options); return this.each(function(){ var $divObj = $(this); var $tableObj = $divObj.find("table"); var $uniqueID = $tableObj.attr("ID") + ("wrapper"); var $class = $tableObj.attr("class"); var $tableWidth = $tableObj.width(); var top = $("#"+$tableObj.attr("ID")).offset().top; var left = $("#"+$tableObj.attr("ID")).offset().left $divObj.append("<table class='"+$class+"' id='"+$uniqueID+"' style='position:absolute;top:" +top+"px;left:"+left+"px;' width='"+$tableWidth+"' border='0' cellspacing='0' cellpadding='0'><thead>"+$("#"+$tableObj.attr("ID")).find("thead").html()+"</thead></table>"); $.each($("#"+$tableObj.attr("ID")).find("thead th"), function(i,item){ $("#"+$uniqueID).find("thead th").eq(i).width($(item).width()); $(item).width($(item).width()); }); if(options.scrolling === "yes") { scrollEvent($tableObj.attr("ID"), $uniqueID); } resizeEvent($tableObj.attr("ID"), $uniqueID); }); function scrollEvent(tableId, uniqueID) { var element = $("#"+uniqueID); $(window).scroll(function(){ var top = $("#"+tableId).offset().top; var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); }; function resizeEvent(tableId, uniqueID) { var element = $("#"+uniqueID); $(window).resize(function(){ var top = $("#"+tableId).offset().top; var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); } }; })(jQuery); </pre>