Question

Hello Some is bugging my mind lately, a website I develop has an ability to add new rows to the table via javascript and each time I add a row I have to apply plugins to each row as such:

假设.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/name设置。它按预期工作，但使用这种方法非常缓慢。

有没有其他建议的方法来实现这一点？

当做

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

如果您必须捕获每行或td上的事件，那么您可以捕获父级上的事件并将其委托给子级，这样javascript将不得不只侦听一个事件，而不是附加到每行或单元格的每个事件。这里有一个例子：

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

This event will also capture any new row that you add to the table. Now if only plugins or jquery had a way to do this easily.

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 s中，而是使用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）.parter（tr）.attr（data）

友情链接