javascript - 在 JavaScript 中使用来自 JSON 的数据动态填充表的快速方法

Question

我正在试验 jQuery、JSON 等，遇到了以下任务。我在服务器上有一个加载程序脚本，它以 JSON 格式返回表数据。收到 JSON 数据后，我想用它们填充我的表。我目前正在使用类似于以下的代码(有更多的列和一些更高级的处理，但你明白了):

...
for (var key=0, size=data.length; key<size;key++) {

  $('<tr>')
            .append( $('<td>').html(
                data[key][0]
            ) )
            .append( $('<td>').addClass('whatever1').html(
                data[key][1]
            ) )
            .append( $('<td>').addClass('whatever2').html(
                data[key][2]
            ) )
            .appendTo('#dataTable');
}
...

<table id="#dataTable"></table>
...

这很好用。但是一旦数据增长，它就会变得非常慢。对于很少的记录，构建表格最多需要大约 5 秒(Firefox、IE)，这有点慢。如果我例如在服务器上创建整个 HTML 并将其作为字符串发送，我将其包含在表中，这将非常快。

那么，有没有更快的填表方式呢？

注意:我知道什么是分页，我会在最后使用它，所以请不要说“你的页面上需要这么大的表格做什么？”。这个问题是关于如何快速填充表格，无论您将显示多少条记录:)

Answer 1

参见 my response到使用数组和“连接”的早期类似查询。

直到最后才调用 jQuery，也就是只调用一次。此外，通过将字符串存储在数组中并使用“join”方法一次性构建字符串，也可以消除字符串连接。

例如

 var r = new Array(), j = -1;
 for (var key=0, size=data.length; key<size; key++){
     r[++j] ='<tr><td>';
     r[++j] = data[key][0];
     r[++j] = '</td><td class="whatever1">';
     r[++j] = data[key][1];
     r[++j] = '</td><td class="whatever2">';
     r[++j] = data[key][2];
     r[++j] = '</td></tr>';
 }
 $('#dataTable').html(r.join(''));