Question

我正在尝试从json创建一个HTML表。我能够根据我找到的示例代码生成我需要的确切格式。触发并似乎创建一个被调用的对象的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'));

                }

             });

}    

...

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

1 个答案: