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执行的内容以及您拥有的行数。

Answer 2

如果您必须捕获每一行或每天的事件，那么您可以在父级上捕获该事件并将其委托给子级，这样javascript将只需要监听一个事件而不是每个事件附加到每一行或细胞。下面是一个例子：

$('.data').bind('click', function(e) {
    if ($(e.target).hasClass('myselectorclass')) {
        // do what you would have done with $('.data .myselectorclass').click(....);
    }
}

此事件还将捕获您添加到表中的任何新行。现在，如果只有插件或jquery可以轻松地做到这一点。

Answer 3

看起来你每次添加行时都只是更改索引号，而且每次更改时都会对行进行重新编号。如果是这种情况，那么您可以通过将结构更改为：

来节省大量工作

<table>
<tr data="1"><td></td><td>......</td></tr>
<tr data="2"><td></td><td>......</td></tr>
<tr data="3"><td></td><td>......</td></tr>
</table>

所以基本上发生的事情是你没有在输入id中嵌入索引号，只是使用data属性将它粘贴在TR标记中。

这将您的代码简化为：

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

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

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

现在，如果你想知道你在哪一行，选择器将是$('input.ofInterest').parent('td').parent('tr').attr('data');

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

3 个答案: