javascript - 将 JSON 对象数组动态放入表中的有效方法是什么？

Question

我有一个使用 PapaParse 创建的 JSON 对象 2D 关联数组 (?)(数据对象有 193 行和 49 列)。我想将其动态添加到我的网页中。下面的代码使用 jQuery 并且可以工作，但速度非常慢。有没有更快的方法？

注意:我给了单元格唯一的 ID，因为我希望用户能够以交互方式选择要保留的某些列...

$('<table/>', {
          'id' : 'dataTable' 
    }).appendTo("body");

$('<tbody/>', {
        "id": "dataTableBody",
    }).appendTo("#dataTable");  


// cycle through values and add data to table

for (var i = 0; i < Parseddata.length; i++) {
    $('<tr/>', { 
        "id":"dataTableRow_"+i 
        }).appendTo("#dataTableBody");
    for (var j = 0; j < Parseddata[0].length; j++) {
        $('<td/>', {
            "id":"dataTableColumn_"+j,
            "text":Parseddata[i][j]
      }).appendTo("#dataTableRow_"+i).css({"border":"solid white 1pt"});
    };
};

Answer 1

我认为最快的方法是使用 html 连接来生成整个标记，然后将其附加到正文。

但同时你可以延迟将表格渲染到正文，直到整个表格构建完毕，这样就不会触发浏览器的重绘...所以尝试一下

var $table = $('<table/>', {
    'id': 'dataTable'
});

var $tbody = $('<tbody/>', {
    "id": "dataTableBody",
}).appendTo($table);


// cycle through values and add data to table
var $tr;
for (var i = 0; i < Parseddata.length; i++) {
    $tr = $('<tr/>', {
        "id": "dataTableRow_" + i
    }).appendTo($tbody);
    for (var j = 0; j < Parseddata[0].length; j++) {
        $('<td/>', {
            "id": "dataTableColumn_" + j,
                "text": Parseddata[i][j]
        }).appendTo($tr).css({
            "border": "solid white 1pt"
        });
    };
};

$table.appendTo("body");

<小时/>

也可以尝试像下面这样的字符串连接

var html = [];
html.push('<table id="dataTable">');
html.push('<tbody id="dataTableBody">');

// cycle through values and add data to table
var $tr;
for (var i = 0; i < Parseddata.length; i++) {
    html.push('<tr id="dataTableRow_' + i + '">');
    for (var j = 0; j < Parseddata[0].length; j++) {
        html.push('<td id="dataTableColumn_' + i + '_' + j + '">');
        html.push(Parseddata[i][j]);
        html.push('</td>');
    };
    html.push('</tr>');
};

html.push('</tbody>');
html.push('</table>');

$('body').append(html.join(''))

<小时/>

• Rendering: repaint, reflow/relayout, restyle
• Repaints and Reflows: Manipulating the DOM responsibly

<小时/>

基准:JSPERF