jquery_jquery를 기반으로 헤더를 수정하는 여러 가지 방법

A: JQuery UI 플러그인을 사용하여 테이블을 DIV, Overflow-y:hidden으로 교체하여 스크롤을 구현하고 광고를 절대 위치로 만들어 고정된 목적을 달성하는 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(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)
$(this) .before($(this).clone().attr ("id", "").addClass("_thead").css(
{'width' : 'auto',
'display' : 'block',
'position':'absolute',
'border':'none',
'border-bottom':'1px solid #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")
$( this).remove();
});
$("#" $uniqueID).ressible({ 핸들: 's' }).css("overflow-y", "숨겨짐");
}
} );
$curr = $this.prev()
$("thead:eq(0)>tr th",this).each ( 함수 (i) {
$("thead :eq(0)>tr th:eq(" i ")", $curr).width( $(this).width());
});
if (options.width == "100%" || "auto"){
$(window).resize(function(){
resizer($this);
});
}
});
}; (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

🎜>

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	셀 2	셀 3	셀 4	;셀 5	셀 6

가장 간단할 수도 있습니다 이런 식으로 작성된 호환성은 절대적으로 안전하고 유연성이 좋습니다.