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(''))

基准：JSPERF

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

1 个答案: