Jquery and dynamic table row updates, painful performance
<p>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:</p>

<p>Assuming .data is my table id:</p>

<pre><code>$('.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...
}
</code></pre>

<p>And it applies tooltips, input mask and id / name setting for each row. It works as intended however it is painfully slow to use this method. </p>

<p>Is there any other recommended way of achieving this ?</p>

<p>Regards</p>
