教學 表格標頭置頂應用處理

[ihstar]

因為工作上的需要，所以會需要表格置頂。
但是用google找到的都不是我要的。想來想去，只好用這一招了。

以下是我處理的方式，首先我是預設第一個tr內容就是標頭了。
所以我先做如下的處理

$("#myTable tr:first td").each(function(i){
        f_div += '<div class="f_div" style="float:left;width:'+$(this).width()+'px;">'+$(this).html()+'</div>';
    });
    $("#myTable").before($("<div class='tab_head'>"+f_div+"</div>"))

先將其td的寬度取出並建立好一個div出來。你可以先讓他顯示來比對原標頭長度是否正確

然後再做捲軸的判斷處理

$(window).scroll(function(){
        st = $(this).scrollTop()
        h = $("#myTable").offset();
        if(st>h.top){     
            $(".tab_head").show();
        }else{         
            $(".tab_head").hide();
        }     
    });

然後css對應如下

.tab_head{
    position: fixed;
    top:0px;
    z-index: 99;
    display: none;
}
.tab_head .f_div{
    /* 這邊的內容依照你原來的標頭td的css設定就好，這樣就不會跑掉*/
}
/*以下是我配合線條使用的，防止因線條的關係對應不準。可視情況使用。
.tab_head .f_div:first-child{
    border-width:0px 0px 1px 1px;
}
.tab_head .f_div:last-child{
    border-width:0px 0px 1px 1px;
}

這樣就大功告成了。
適用於任何表格上處理。如果標頭是th的話。也只要將td改成th就行了。
重點在於要取得其寬度好做出一個浮動的div。當表格的標頭消失在頂端就將其出現就行了

原本是想將f_div的css用copy的方式建立。不過後來想想比較麻煩。
所以就交給使用者自行去定義了。畢竟各使用者的table的定義不同。