ZZCS/coding/zz-jd/js/channel_table_flow.js

window.onload = function(){
    var sourceTable = $("#table-data");//table id 获取表对象
    var sourceTableHead = $("#table_head");//table thead tr id 获取表头thead
    var headHeight = sourceTableHead.outerHeight();//table thead tr height 获取资源表的宽度

    //copy table and thead html tag from source table,
    $('#table-data').append('<div id="shelter"><table id="fixed_table" class="table table-bordered table-hover" style="margin-left: 1px;"><thead></thead></table></div>'); //重建一个table添加到body中
    //only set top and left,beacuse i need the top bar can scroll left
    $("#shelter").css({'height':headHeight,'position':'fixed','top':'0','left':'25'}); // 设置目标表格的高度等于源表格的高度，高度是一定的

    // 克隆源表格的头部并设置目标表格的id=fix_head
    var targetHead = sourceTableHead.clone();
    targetHead.attr('id','fix_head');
    targetHead.appendTo('#fixed_table thead');
    targetHead.find('input').attr('onclick', 'alterCheck(this)');

    // 根据源表的宽度和高度设置目标的宽和高
    $("#table_head th").each(function(index,value){
        var tempWidth = $(value).outerWidth();
        // var tempHeight = $(value).outerHeight();
        $("#fixed_table th").eq(index).css({'width':tempWidth + "px", 'height':35+"px"});
    });

    var myThead = $('#shelter');

    $(window).resize(function()
    {
        // 当窗口变化时重复以上步骤
        var sourceTable = $("#table-data");//table id
        var sourceTableHead = $("#table_head");//table thead tr id
        var headHeight = sourceTableHead.outerHeight();//table thead tr height

        $('#table-data').append('<div id="shelter" class="shelter removeShelter"><table id="fixed_table" class="table table-bordered table-hover" style="margin-left: 1px;"><thead></thead></table></div>');
        //only set top and left,beacuse i need the top bar can scroll left
        $("#shelter").css({'height':headHeight,'position':'fixed','top':'0','left':'25'});
        var sourceTableWidth = sourceTable.outerWidth(); //get source table width
        $("#fixed_table").css({'width':sourceTableWidth+"px"});
        $('.removeShelter').remove();
        // 窗口变化时获取源表格的头部，遍历头部的th标签，设置目标表格的头的宽度
        $("#table_head th").each(function(index,value){
            var tempWidth = $(value).outerWidth();
            // var tempHeight = $(value).outerHeight();
            $("#fixed_table th").eq(index).css({'width':tempWidth + "px",'height':35+"px"});
        });
    });


    $('#table_head th').bind('DOMNodeInserted', function(e){
        // 当窗口变化时重复以上步骤
        var sourceTable = $("#table-data");//table id
        var sourceTableHead = $("#table_head");//table thead tr id
        var headHeight = sourceTableHead.outerHeight();//table thead tr height
        $('#shelter').remove();
        $('#table-data').append('<div id="shelter" class="shelter"><table id="fixed_table" class="table table-bordered table-hover" style="margin-left: 1px;"><thead></thead></table></div>');
        //only set top and left,beacuse i need the top bar can scroll left
        $("#shelter").css({'height':headHeight,'position':'fixed','top':'0','left':'25'});

        var targetHead = sourceTableHead.clone();
        targetHead.attr('id','fix_head');
        targetHead.appendTo('#fixed_table thead');
        targetHead.find('input').attr('onclick', 'alterCheck(this)');
        var sourceTableWidth = sourceTable.outerWidth(); //get source table width

        $("#fixed_table").css({'width': sourceTableWidth + "px"});
        // $('.shelter').remove();
        // 获取源表格的头部，遍历头部的th标签，设置目标表格的头的宽度
        $("#table_head th").each(function(index,value){
            var tempWidth = $(value).outerWidth();
            var tempHeight = $(value).outerHeight();
            $("#fixed_table th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});
        });
        $("#shelter").hide();
    });

    // 先将目标表头隐藏d
    $("#shelter").hide();

    // 窗口滚动时触发的事件
    $(window).scroll(function(){
        //scroll left method
        var sl=-Math.max($('body').scrollLeft(), $('document').scrollLeft());
        if(isNaN(sl)){
            sl = - $(window).scrollLeft();
        }

        $('#shelter').css("left", 25 + sl +'px');
        var scroll_top = $(document).scrollTop() - sourceTable.offset().top;
        //control  show or hide
        if (scroll_top > 0) {
            $('#shelter').show();
        }else {
            $('#shelter').hide();
        }
    });

};