jquery_jquery に基づいてヘッダーを修正するためのいくつかの方法

A: JQuery UI プラグインを使用し、テーブルを DIV、overflow-y:hidden に置き換えてスクロールを実現し、固定の目的を達成するために thead を絶対配置にします。方法は次のとおりです。 >

コードをコピー コードは次のとおりです: (function($){

$.chromatable = {

デフォルト: {
幅: "900px"、
高さ: "300px"、
スクロール: "はい"
}
};
$.fn.chromatable = function(options) ){
var options = $.extend({ }, $.chromatable.defaults, options);
return this.each(function(){
var $this = $(this);
var $uniqueID = $(this).attr(" ID") ("wrapper");
$(this).css('width', options.width).addClass("_scrolling"); >$(this).wrap('

');
$(".scrolling_outer").css( {'position':'relative'});
$("#" $uniqueID).css(
{'border':'1px Solid # CCCCCC',
'overflow-x':' hidden',
'overflow-y':'auto',
'padding-right':'17px'
}); $("#" $uniqueID).css('height ', options.height);
$("#" $uniqueID).css('width', options.width); .before($(this).clone().attr ("id", "").addClass("_thead").css(
{'width' : 'auto',
'display' : 'block',
'position':'absolute ',
'border':'none',
'border-bottom':'1px ソリッド #CCC',
'top':' 1px'
}));
$ ('._thead').children('tbody').remove();
$(this).each(function( $this ){
if (options.width == "100%" || options.width == "auto") {
$("#" $uniqueID).css({'padding-right':'0px'});
}
if (options.scrolling = = "no") {
$("#" $uniqueID).before('テーブルを展開$("#" $uniqueID).css({'padding-right':'0px'});
$(" .expander").each(
function(int ){
$(this).attr("ID", int);
$( this ).bind ("click",function(){
$("#" $uniqueID).css ({'height':'auto'});
$("#" $uniqueID " ._thead").remove(); this).remove();
});
$("#" $uniqueID).resizable({ ハンドル: 's' }).css("overflow-y", "hidden");
}
} );
$curr = $this.prev();
$("thead:eq(0)>tr th",this) ( function (i) {
$("thead :eq(0)>tr th:eq(" i ")", $curr).width( $(this).width());
});
if (options.width == "100%" || "auto"){
$(window).resize(function(){
resizer($this);
});
}
});
関数 Reiser($this) {
$curr = $this.prev(); (0)>tr th", $this). each( function (i) {
$("thead:eq(0)>tr th:eq(" i ")", $curr).width ( $(this).width());
})(jQuery);






コードをコピーします


コードは次のとおりです:


...

	列头		列头		列头
h1	h2	h3	h4	h5	h6	h7

セル 2
;セル 5セル 6
🎜>

a	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
b	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
c	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
a	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
b	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
c	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
d	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
e	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
f	单元格2	单元格3	单元格4	单元格5	单元格6	单元格7
g	セル 4

最も単純な方法である場合もありますこの方法で書かれた互換性は絶対に安全であり、柔軟性も優れています。