HTML表格与冻结（可滚动）垂直和水平行/列

问题描述：

我想从json创建一个HTML表。我能够基于我找到的示例codepen生成我需要的确切格式。引发的JavaScript似乎创建了一个被调用的对象，该对象修改了包含div的CSS。用作静态数据的HTML（由JSON生成）可以100％工作。HTML表格与冻结（可滚动）垂直和水平行/列

工作的例子 - http://www.cocopine.co.za/code/index.html

我的问题是，当我产生从Javascript读取JSON和构建表中的HTML，JavaScript的似乎太快火，什么也不做表div的滚动。我对JavaScript很新颖，JS文件中的代码需要修改，目前略高于我的水平。

错误的JavaScript生成的页面 - http://www.cocopine.co.za/code/grid1.html

总结：滚动（垂直和水平）时grid1.html应该的行为方式的index.html同

未在生成的HTML工作中的JavaScript如下：

(function() { 
    var demo, fixedTable; 
    fixedTable = function(el) { 
    var $body, $header, $sidebar; 
    $body = $(el).find('.fixedTable-body'); 
    $sidebar = $(el).find('.fixedTable-sidebar table'); 
    $header = $(el).find('.fixedTable-header table'); 
    return $($body).scroll(function() { 
     $($sidebar).css('margin-top', -$($body).scrollTop()); 
     return $($header).css('margin-left', -$($body).scrollLeft()); 
    }); 
    }; 

    demo = new fixedTable($('#demo')); 

}).call(this);

答

我已成功通过运行JSON文件处理jQuery的回调函数中的代码得到这个工作。

我不太熟悉jquery的异步事件，但显然json调用正在发生，然后继续处理下一个代码，处理JSON和HTML在后台发生，并且只在js后才完成代码已经完成。

总之。所有表格和div加在一起之后，js代码被添加进来。

... 
sideTable.appendChild(tbody); 
       aside.appendChild(sideTable); 
       div.appendChild(aside); 
       divBody.appendChild(tableBody) 
       div.appendChild(divBody); 
       element.appendChild(div);     

       var demo, fixedTable; 
        fixedTable = function(el) { 
        var $body, $header, $sidebar; 
        $body = $(el).find('.fixedTable-body'); 
        $sidebar = $(el).find('.fixedTable-sidebar table'); 
        $header = $(el).find('.fixedTable-header table'); 
        return $($body).scroll(function() { 
         $($sidebar).css('margin-top', -$($body).scrollTop()); 
         return $($header).css('margin-left', -$($body).scrollLeft()); 
        }); 
        }; 

        demo = new fixedTable($('#demo')); 

       } 

      }); 

}  

...

HTML表格与冻结（可滚动）垂直和水平行/列

相关推荐