Jquery 동적으로 추가 된 행 번호

Question

사용자가 동적으로 행을 추가 할 수있는 html 테이블이 있습니다.
jquery로 자동 행 증가분을 구현하려고했습니다.

이 순서대로 추가하기 시작
2 행을 추가 한 후 나는 그것이 인덱스 1로 시작 만들 수 없습니다

,
동안 순서는 괜찮습니다하지만 우리는 중간에서 제거 할 때이 번호를 변경하지 않습니다에 제거 주문.

나는 더 설명 될 것입니다, 당신은 여기에 라이브 예제를 볼 수

var i=1; 

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

을 증가
jsfiddle.net

그것은 인덱스 1

에서 자동으로 시작이 코드를 사용하고 있습니다 감사합니다

Answer 1

귀하의 문제는 귀하의 클래스 이름입니다. 이 작동하는 바이올렛을 보아라. 당신은 그것들 모두를 반복하고있다. td와 입력을 모두 명명하여 http://jsfiddle.net/ZFWU7/5/

으로 명명한다.

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