HTML表格與凍結（可滾動）垂直和水平行/列

Question

我想從json創建一個HTML表。我能夠基於我找到的示例codepen生成我需要的確切格式。引發的JavaScript似乎創建了一個被調用的對象，該對象修改了包含div的CSS。用作靜態數據的HTML（由JSON生成）可以100％工作。

工作的例子 - 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); 

Answer 1

我已成功通過運行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')); 

       } 

      }); 

}  

...