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(); 
}