使用 jQuery 即时构建 HTML 表格

Question

以下是我用来动态构建 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 += "&nbsp;" ;
        }
        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") ;

Answer 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});
});
...

Answer 2

我一直在使用 JTemplates 来完成您所描述的内容。 Dave Ward 在他的博客here 上有一个例子。 JTemplates 的主要好处是您的 html 不会被编织到您的 javascript 中。您编写一个模板并调用两个函数让 jTemplate 从您的模板和您的 json 构建 html。

Answer 3

您正在做的是构建一个字符串，然后在插入时立即对其进行解析。如何创建一个实际的表格元素（即$("<table>")），然后将每一行依次添加到其中？当你真正将它插入页面时，DOM 节点都已经构建好了，所以它应该不会有那么大的影响。

Answer 4

使用innerHTML 肯定比使用jQuery 的HTML-to-DOM-ifier 快得多，后者使用innerHTML 但对输入进行大量处理。

我建议查看chain.js，作为一种从 JavaScript 对象快速构建表和其他重复数据结构的方法。这是一个非常轻量级、智能的 jQuery 数据绑定插件。

Answer 5

对于初学者，请查看 flydom 及其变体，它们将提供大量帮助。您能否提供更多背景信息？如果这不在 onload 中并且只是粘贴在页面中，只需将整个内容包装在 $(function () { /* code */ }) 中可能会清理您遇到的所有问题。内联 JS 立即执行，这意味着表的循环。 onload 是一个事件，本质上是“分离的”。

Answer 6

我的经验是有两个离散的延迟。一个是将所有这些字符串连接在一起。另一种是浏览器实际尝试呈现字符串时。通常，IE 最容易出现 UI 冻结问题，部分原因是它在运行 javascript 时要慢得多。这在 IE8 中应该会变得更好。

在您的情况下，我建议将操作分解为多个步骤。假设一个 100 行表，您首先生成一个有效的 10 行表。然后将其输出到屏幕并使用 setTimeout 将控制权返回给浏览器，以便 UI 停止阻塞。当 setTimeout 回来时，您执行接下来的 10 行，等等。

正如其他人所说，使用 DOM 创建表肯定“更干净”。然而，就性能而言，要付出高昂的代价。请参阅关于此主题的出色的 quirksmode 文章，其中包含一些您可以自己运行的基准测试。

长话短说，innerHTML 比 DOM 快得多，即使在现代 JS 引擎上也是如此。

Answer 7

在 Web 上搜索 JavaScript 和 StringBuilder。一旦你有了一个 JavaScript 字符串构建器，请确保你对每个连接都使用 .append 方法。也就是说，您不希望有任何 + 连接。之后，搜索 JavaScript 并替换html。使用这个函数代替innerHTML。

Answer 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 += "&nbsp;" ; 
  }
  else { 
   myTr += t.data[i][t.hdrs[j]] ; 
  }
  myTr += "</td>";
  }
 myTr +=    "</tr>";
 $('#myTable tbody').append(myTr);
}

$("#PleaseWaitGraphic").addClass("hide");
$(".rslt").removeClass("hide") ;