jquery动态添加行号

Question

我有一个html表，用户可以动态添加行。
我试图用jQuery实现自动行增量。

我不能使它与索引1开始，
将第二排后，它开始以添加，
当拆下，以便它是确定，但是当我们从中间将其删除不改号订购。

我使用这个代码，以增加

var i=1; 

$('.form_id').each(function(){ 
    $(this).text(i); 
    i++; 
}); 

你可以在这里看到的活生生的例子，这将是更强的解释
jsfiddle.net

应该从指数1

自动启动谢谢

Answer 1

你的问题是你的班级命名。看到这个工作小提琴http://jsfiddle.net/ZFWU7/5/

通过命名td和输入.form_id您正在迭代所有这些。

$('td.form_id').each(function(i){ 
     $(this).text(i+1); 
    }); 

让您选择更具体的

按你的意见，我会分开你的“排序”功能到它自己的明确定义的函数，而不是使这两种行为anonomys功能的一部分。你没有很好地遵循DRY规则。我已经用更清晰的可维护方式（从小提琴）重写了您的代码。这只是稍微好一点。在全局名称空间中声明函数并不是一个很好的做法。命名空间的'控制器'组会更好。 http://addyosmani.com/blog/essential-js-namespacing/

$(document).ready(function() { 
    $("#add-line").click(addRow); 
}); 

function updateRowOrder(){ 
$('td.form_id').each(function(i){ 
     $(this).text(i+1); 
      }); 
} 

function addRow(){ 
    var template = $('#template'), 
    id = 0; 

    if(!template.is(':visible')) 
    { 
     template.show(); 
     return; 
    } 
    var row = template.clone(); 
    template.find("input:text").val(""); 
    row.attr('id', 'row_' + (++id)); 
    template.before(row); 
    var i=1; 
    updateRowOrder(); 
    $('.form-fields').on('click', '.remove', removeRow); 

} 

function removeRow(){ 
    var row = $(this).closest('tr'); 
    if(row.attr('id') == 'template') 
    { 
     row.hide(); 
    } 
    else 
    { 
     row.remove(); 
    } 
    updateRowOrder(); 
}