javascript - Jquery和动态表行更新，痛苦的性能

Question

你好 最近有些人困扰着我，我开发的一个网站能够通过 javascript 向表中添加新行，每次添加一行时，我都必须将插件应用到每一行，如下所示:

假设.data是我的表ID:

$('.data tbody tr').each(function(idx) {
    $("input:text", this).setMask();
    $(this).bindTooltip();
    syncRowStatus();
    syncRow(this, idx);
});


function countRows(){
    return $('.data tbody tr').size();
};
function syncRowStatus(){
    var totalRowSize = countRows();
    var newHtml = "Total rows: "+ (totalRowSize); //as it is 0-indexed
    $(".rowamount").html(newHtml);
};

function syncRow(row, idx){
    //fix row id.
    $(row).attr("id","row-"+idx );

    //fix pk field.
    var pk = $("td input:eq(0)" ,row);
    pk.attr('name', 'form-'+ idx +'-pk').attr('id', 'id_form-'+ idx +'-pk');
    //fix checked field.
    var selected = $("td input:eq(1)" ,row);
    selected.attr('name', 'form-'+ idx +'-selected').attr('id', 'id_form-'+ idx +'-selected');
    //fix start_time field.
    var start_time = $("td input:eq(2)" ,row);
    start_time.attr('name', 'form-'+ idx +'-start_time').attr('id', 'id_form-'+ idx +'-start_time');
    //fix end_time field.
    var end_time = $("td input:eq(3)" ,row);
    end_time.attr('name', 'form-'+ idx +'-end_time').attr('id', 'id_form-'+ idx +'-end_time');
    //fix program name.
    var program_name = $("td input:eq(4)" ,row);
    program_name.attr('name', 'form-'+ idx +'-program_name').attr('id', 'id_form-'+ idx +'-program_name');
    //fix year
    var year = $("td input:eq(5)" ,row);
    year.attr('name', 'form-'+ idx +'-year').attr('id', 'id_form-'+ idx +'-year');

 //And it goes like this...
}

它为每行应用工具提示、输入掩码和 id/名称设置。它按预期工作，但使用此方法的速度非常慢。

还有其他推荐的方法可以实现这一目标吗？

问候

Answer 1

我的第一条评论是，您只需将元素转换为 jQuery 对象一次...

$('.data tbody tr').each(function(idx) {
    $This = $(this);
    $This.find("input:text").setMask();
    $This.bindTooltip();
    syncRowStatus();
    syncRow(this, idx);
});

仅仅因为这一改变，性能就会提高一点。

之后，这取决于 setMask、bindTooltip、syncRowStatus 和syncRow 执行的操作以及您有多少行。