使用jQuery动态构建HTML表
使用jQuery动态构建HTML表
提问于 2017-12-27 03:43:23
下面是我用来动态构建HTML表的代码(使用从服务器接收的JSON数据)。
我展示了一种生动的乐趣。(GIF)数据加载时的图形。但是，在JavaScript函数构建表时，图形会冻结。一开始，我只是很高兴地做到了这一点(显示表)，我想现在我需要提高效率。至少我需要阻止动画图像冻结。我可以使用静态的“加载”显示，但是我更愿意让这个方法工作。
可能是建表更好的方法？一些其他的“表”，比如显示。
var t = eval( "(" + request + ")" ) ;
var myTable = '' ;
myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
myTable += "<thead>" ;
myTable += "<tr>";
for (var i = 0; i < t.hdrs.length; i++) {
myTable += "<th>" + header + "</th>";
}
myTable += "</tr>" ;
myTable += "</thead>" ;
myTable += "<tbody>" ;
for (var i = 0; i < t.data.length; i++) {
myTable += '<tr>';
for (var j = 0; j < t.hdrs.length; j++) {
myTable += '<td>';
if (t.data[i][t.hdrs[j]] == "") {
myTable += " " ;
}
else {
myTable += t.data[i][t.hdrs[j]] ;
}
myTable += "</td>";
}
myTable += "</tr>";
}
myTable += "</tbody>" ;
myTable += "</table>" ;
$("#result").append(myTable) ;
$("#PleaseWaitGraphic").addClass("hide");
$(".rslt").removeClass("hide") ;回答 4
Stack Overflow用户
发布于 2017-12-27 09:53:19
您基本上希望设置您的循环，这样它们就会频繁地向其他线程屈服。下面是一些示例代码这篇文章关于在不冻结UI的情况下运行CPU密集型操作的主题：
function doSomething (progressFn [, additional arguments]) {
// Initialize a few things here...
(function () {
// Do a little bit of work here...
if (continuation condition) {
// Inform the application of the progress
progressFn(value, total);
// Process next chunk
setTimeout(arguments.callee, 0);
}
})();
}只要简化脚本中HTML的生成，如果使用jQuery，您可能会给出简单模板一次插入式尝试。它通过大幅度减少你必须做的连接的数量来清理这个过程。在我最近做了一些重构之后，它的性能也很好。
var t = eval('(' + request + ')') ;
var templates = {
tr : '<tr>#{row}</tr>',
th : '<th>#{header}</th>',
td : '<td>#{cell}</td>'
};
var table = '<table><thead><tr>';
$.each(t.hdrs, function (key, val) {
table += $.tmpl(templates.th, {header: val});
});
...Stack Overflow用户
发布于 2017-12-27 11:37:44
Stack Overflow用户
发布于 2017-12-27 11:45:47
使用innerHTML肯定比使用jQuery的HTMLto-DOM-1更快，后者使用了innerHTML，但是对输入进行了大量的处理。
我建议checking ouchain.js作为从JavaScript对象快速构建表和其他重复数据结构的一种方法。它是一个非常轻量级的、智能的jQuery数据库插件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100000036
复制相关文章
相似问题