편집 버튼이있는 테이블의 인라인 편집

Question

다음 샘플 코드는 편집 버튼을 사용하여 행을 편집 할 수 있도록하기위한 것입니다. 기본적으로 3 개의 버튼이 있습니다. 처음에는 버튼을 숨기고 있습니다. 편집 버튼을 클릭하면 인라인 편집이 활성화되어야합니다. 업데이트 인라인 편집을 클릭하면 사용 중지되어야합니다.
아래 코드를 작성했는데 내가 잘못했는지 찾을 수 없습니까?

$('.edit').click(function(){ 
     var currentTD = $(this).parents('tr').find('td'); 
     if ($(this).html() == 'Edit') { 
      currentTD = $(this).parents('tr').find('td'); 
      $.each(currentTD, function() { 
      $(this).prop('contenteditable', true) 
      }); 
     } else { 
      $.each(currentTD, function() { 
      $(this).prop('contenteditable', false) 
      }); 
     } 
     }); 

전체 코드 : Fiddle. 주된 것은 동적 데이터를 사용하고 있기 때문에 선택한 행만 편집 할 수 있습니다. 내가 잘못했는지 알려주세요.

Answer 1

아래 코드를 살펴 보시겠습니까? 단지 수정의 부부와 함께 그것의 당신의 코드 : https://jsfiddle.net/xcmvzpuk/5/

$('.edit').click(function() { 

    var editId = $(this).attr('id'); //here we will get id like edit0 and edit1 and so on 
    $("#" + editId).hide(); 
    var number = editId.replace("edit", ""); //grab the number from id 
    $("#update" + number).show();//show the corresponding update button 

    var currentTD = $(this).parents('tr').find('td'); 
    //enable the current row 
    $.each(currentTD, function() { 
     $(this).prop('contenteditable', true) 
    }); 

    }); 

    $('.update').click(function() { 
    var updateId = $(this).attr('id'); 
    $("#" + updateId).hide(); 
    var number = updateId.replace("update", ""); 
    $("#edit" + number).show(); 

    var currentTD = $(this).parents('tr').find('td'); 
    //disable the current row 
    $.each(currentTD, function() { 
     $(this).prop('contenteditable', false) 
    }); 
    }); 

Answer 2

이름

당신의 tr 수치 각 행에 대해 - 그런 다음 편집 버튼을 예를 row1, row2에 대한, 그리고 잠재적으로 편집 td.tdCanEdit 등으로 클래스를 추가 따라서 button1, button2과 같이 이름이 지정됩니다. 그런 다음 버튼을 클릭하여 번호를 추출하는 함수를 만듭니다. 이 번호를 사용하여 행 ID를 가져옵니다. 행의 하위 항목에있는 각 .tdCanEdit 분류 된 요소를 찾으십시오. 그들에게 .contenteditable 클래스를 추가하십시오.

물론 모두 완료 후 .contenteditable 클래스를 제거하십시오.

($(this).html() == 'Edit') 수표를 피하십시오. 클래스를 대신 사용하십시오 (버튼에 몇 가지 클래스 추가).