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

【问题标题】：HTML Table with frozen (scrollable) vertical and horizontal rows/columns具有冻结（可滚动）垂直和水平行/列的 HTML 表格
【发布时间】：2017-11-16 10:20:54
【问题描述】：

我正在尝试从 json 创建一个 HTML 表。我能够根据我找到的示例代码笔生成我需要的确切格式。触发的 javascript 似乎创建了一个被调用的对象，该对象修改了包含 div 的 css。 HTML（从 JSON 生成）用作静态数据时 100% 有效。

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

我的问题是，当我从读取 JSON 并构建表格的 Javascript 生成 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);

【问题讨论】：

标签： javascript html html-table horizontal-scrolling vertical-scrolling

【解决方案1】：

我已经设法通过在 json 文件进程的 jquery 回调函数中运行代码来实现这一点。

我对 jquery 的异步事件不太熟悉，但显然 json 调用正在发生，然后在后台处理 JSON 和 HTML 并仅在 js 代码之后完成已经完成了。

简而言之。 js代码是在所有表格和div加在一起之后添加的。

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

                }

             });

}    

...

【讨论】：