使用 jQuery 即时构建 HTML 表格
Posted
技术标签:
【中文标题】使用 jQuery 即时构建 HTML 表格【英文标题】:Building an HTML table on the fly using jQuery 【发布时间】:2010-09-11 08:03:22 【问题描述】:以下是我用来动态构建 html 表的代码(使用从服务器接收的 JSON 数据)。
在加载数据时,我会显示一个动画请稍候 (.gif) 图形。但是,当 javascript 函数正在构建表格时,图形会冻结。起初,我很高兴能做到这一点(显示表格),我想现在我需要提高效率。至少我需要阻止动画图形冻结。我可以转到静态的“正在加载”显示,但我宁愿让这个方法起作用。
对我的 pleasewait 显示的建议?和效率?可能是构建表格的更好方法?或者可能不是表格,而是其他一些“表格”,例如显示
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") ;
【问题讨论】:
您在这段代码中大约创建了多少列和行? 【参考方案1】:您基本上希望设置循环,以便它们每隔一段时间就让给其他线程。以下是来自this article 的一些示例代码,主题是在不冻结 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,可以试试我的 Simple Templates 插件。它通过大幅减少您必须执行的连接数量来整理过程。在我最近进行了一些重构之后,它的性能也非常好,这导致了一个相当大的speed increase。这是一个示例(无需为您完成所有的工作!):
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);
);
...
【讨论】:
谢谢,我很欣赏简单模板插件。仅供参考,您的加速链接应用程序已损坏。当我尝试运行任何测试时,我会遇到一些 JavaScript 错误。 感谢您告诉我,Rich。问题是测试假定了旧版本的 jQuery。页脚中包含的较新版本破坏了我编写插件的方式。如果你想再试一次,它现在已经修复了。 您的网站已关闭。您介意提供一个完整的示例吗? 您应该考虑使用数组和连接函数来连接可能大量的字符串。 var table = ['我一直在使用 JTemplates 来完成您所描述的内容。 Dave Ward 在他的博客here 上有一个例子。 JTemplates 的主要好处是您的 html 不会被编织到您的 javascript 中。您编写一个模板并调用两个函数让 jTemplate 从您的模板和您的 json 构建 html。
【讨论】:
这里绝对同意,客户端站点模板是您可以从数据源创建 HTML 元素的最佳方式。【参考方案3】:您正在做的是构建一个字符串,然后在插入时立即对其进行解析。如何创建一个实际的表格元素(即$("<table>")
),然后将每一行依次添加到其中?当你真正将它插入页面时,DOM 节点都已经构建好了,所以它应该不会有那么大的影响。
【讨论】:
【参考方案4】:使用innerHTML 肯定比使用jQuery 的HTML-to-DOM-ifier 快得多,后者使用innerHTML 但对输入进行大量处理。
我建议查看chain.js,作为一种从 JavaScript 对象快速构建表和其他重复数据结构的方法。这是一个非常轻量级、智能的 jQuery 数据绑定插件。
【讨论】:
【参考方案5】:对于初学者,请查看 flydom 及其变体,它们将提供大量帮助。您能否提供更多背景信息?如果这不在 onload 中并且只是粘贴在页面中,只需将整个内容包装在 $(function () /* code */ ) 中可能会清理您遇到的所有问题。内联 JS 立即执行,这意味着表的循环。 onload 是一个事件,本质上是“分离的”。
【讨论】:
【参考方案6】:我的经验是有两个离散的延迟。一个是将所有这些字符串连接在一起。另一种是浏览器实际尝试呈现字符串时。通常,IE 最容易出现 UI 冻结问题,部分原因是它在运行 javascript 时要慢得多。这在 IE8 中应该会变得更好。
在您的情况下,我建议将操作分解为多个步骤。假设一个 100 行表,您首先生成一个有效的 10 行表。然后将其输出到屏幕并使用 setTimeout 将控制权返回给浏览器,以便 UI 停止阻塞。当 setTimeout 回来时,您执行接下来的 10 行,等等。
正如其他人所说,使用 DOM 创建表肯定“更干净”。然而,就性能而言,要付出高昂的代价。请参阅关于此主题的出色的 quirksmode 文章,其中包含一些您可以自己运行的基准测试。
长话短说,innerHTML 比 DOM 快得多,即使在现代 JS 引擎上也是如此。
【讨论】:
没有人建议使用 DOM 创建表,因此您的参考不适用。使用 innerHTML 插入内容会创建 DOM 节点。提及这一事实与建议使用 createElement 不同。【参考方案7】:在 Web 上搜索 JavaScript 和 StringBuilder。一旦你有了一个 JavaScript 字符串构建器,请确保你对每个连接都使用 .append
方法。也就是说,您不希望有任何 +
连接。之后,搜索 JavaScript 并替换html。使用这个函数代替innerHTML
。
【讨论】:
【参考方案8】:您可以将表格一点一点地插入到 DOM 中。老实说,我不完全确定这是否有助于解决您的问题,但值得一试。我会大致这样(未经测试的代码,可以进一步完善):
$("#result").append('<table id="myTable" cellspacing=0 cellpadding=2 border=1></table>');
$('#myTable').append('<thead><tr></tr></thead>');
$('#myTable').append('<tbody></tbody>');
for (var i = 0; i < t.hdrs.length; i++)
$('#myTable thead tr').append('<th>'+header+'</th>');
for (var i = 0; i < t.data.length; i++)
myTr = '<tr>';
for (var j = 0; j < t.hdrs.length; j++)
myTr += '<td>';
if (t.data[i][t.hdrs[j]] == "")
myTr += " " ;
else
myTr += t.data[i][t.hdrs[j]] ;
myTr += "</td>";
myTr += "</tr>";
$('#myTable tbody').append(myTr);
$("#PleaseWaitGraphic").addClass("hide");
$(".rslt").removeClass("hide") ;
【讨论】:
以上是关于使用 jQuery 即时构建 HTML 表格的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 jQuery validate 验证表单中的所有字段?