在很多網(wǎng)站應(yīng)用中，都需要對(duì)表格進(jìn)行凍結(jié)操作，而jquery可以給我們有效的幫助采取首行和首列凍結(jié)的方式來(lái)解決。

首先，我們需要明確這個(gè)功能的實(shí)現(xiàn)方式是基于CSS的。通過(guò)jQuery添加/刪除CSS樣式類，我們可以有效地協(xié)調(diào)表格中的行和列，以實(shí)現(xiàn)第一行和第一列的凍結(jié)效果。

下面是prototype模板，我們可以根據(jù)它來(lái)注冊(cè)我們的jQuery函數(shù)：

(function($){
$.fn.freezeheader = function(options){
options = $.extend({
scrollableArea: null,
"fixedCols": 1,
"width": null,
"height": null,
}, options);
this.each(function(){
var $tbl = $(this),
$tblWrapper = $("
").addClass("fht-table-wrapper"),
$cloneTbl = $tbl.clone(true),
wrapperWidth,
wrapperHeight;
//處理表格
handleTable($tbl, $cloneTbl, options.fixedCols);
//處理表格容器
handleWrapper($tblWrapper, options.width, options.height, $tbl.outerWidth(), $tbl.outerHeight());
//處理滾動(dòng)容器
handleScrollableArea(options.scrollableArea, $tblWrapper);
//將表格添加到容器中
$tbl.before($tblWrapper);
//根據(jù)調(diào)整大小或旋轉(zhuǎn)調(diào)整表格大小
$(window).on("resize orientationchange", function(){
handleWrapper($tblWrapper, options.width, options.height, $tbl.outerWidth(), $tbl.outerHeight());
handleTable($tbl, $cloneTbl, options.fixedCols);
wrapperWidth = $tblWrapper.outerWidth();
$(".fht-scroll").width(wrapperWidth >$tbl.outerWidth() + 20 ? $tblWrapper.width() : $tbl.outerWidth() + 20 );
wrapperHeight = $tblWrapper.outerHeight();
$(".fht-scroll").height(wrapperHeight >$tbl.outerHeight() ? $tbl.outerHeight() : wrapperHeight);
});
});
};
})(jQuery);

這是一個(gè)freezeheader的模板，它可以根據(jù)應(yīng)用程序的需要來(lái)進(jìn)行定制化，比如設(shè)置“fixedCols”選項(xiàng)表示凍結(jié)前幾列。

下面是代碼，它可以幫助您使用jquery實(shí)現(xiàn)首行首列凍結(jié)的效果：

.table {
height: auto;
overflow: hidden;
position: relative;
width: auto;
}
.table th:first-child, .table td:first-child {
background-color: #fff;
position: absolute;
top: auto;
width: 50px;
}
.table td, .table th {
width: auto !important;
}
.table td:first-child {
padding-left: 50px;
}
.table th:first-child, .table td:first-child {
left: 0;
z-index: 10;
}

對(duì)于自定義應(yīng)用程序，您可能需要從包含jquery庫(kù)和樣式表的外部資源中加載代碼。請(qǐng)記得在編寫代碼時(shí)加入代碼注釋，以便維護(hù)更容易。