表格標頭置頂應用處理

本帖由 yoching2015-09-23 發佈。版面名稱:Jquery應用

  1. yoching

    yoching 超神星 管理成員

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

    以下是我處理的方式,首先我是預設第一個tr內容就是標頭了。
    所以我先做如下的處理
    HTML:
    $("#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出來。你可以先讓他顯示來比對原標頭長度是否正確

    然後再做捲軸的判斷處理
    HTML:
    $(window).scroll(function(){
            st = $(this).scrollTop()
            h = $("#myTable").offset();
            if(st>h.top){       
                $(".tab_head").show();
            }else{           
                $(".tab_head").hide();
            }       
        });
    然後css對應如下
    HTML:
    .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的定義不同。
     

分享此頁面

正在載入...