具有冻结（可滚动）的垂直和水平行/列的HTML表

Question

I am trying to create an HTML table from json. I am able to generate the exact format that I need based on a sample codepen that I found. The javascript that fires and seems to create an object that is called which modifies the css for the containing div. The HTML (generated from JSON) when used as static data works 100%.

Working example - http://www.cocopine.co.za/code/index.html

My problem is when I generate the HTML from Javascript reading the JSON and building the table, the javascript seems to fire too quickly and do nothing to the scrolling of the table div. I am very new to Javascript and the code in the JS file needs modification and is a bit beyond my level at the moment.

Error Javascript generated page - http://www.cocopine.co.za/code/grid1.html

In summary : grid1.html should behave the same way as index.html when scrolling (vertical and horizontal)

The Javascript that is not working on the generated HTML is the following:

(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

I have managed to get this working by running the code within the jquery callback function for the json file process.

I am not too familiar with the asynchronous events of jquery but obviously the json call was happening and then moving on to the next bit of code with the processing of the JSON and HTML happening in the background and only completing after the js code has already finished.

In short. The js code was added in after the adding together of all the tables and divs.

...
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'));

                }

             });

}    

...