자바 스크립트 인라인 편집, 원본 데이터를 편집 취소하는 방법?

Question

는 내가 어떤 아약스을하고 TDS 파일을 검색하고 [$(row_id).html(html)] 행의 TDS 파일을 교체 한 후 editRow 기능의 자바 스크립트

function editRow(row_id) { 
    //some ajax to retrieve html in the format 
    //<td><input type="text" name="td_1" value="Text 1"></td> 
    //<td><input type="text" name="td_2" value="Text 2"></td> 
    //<td><input type="submit" name="submit" value="submit"></td> 
} 

데이터

<tr id="row_1"> 
    <td id="td_1_1">Text 1</td> 
    <td id="td_2_1">Text 2</td> 
    <td><a href="#" onclick="editRow(1)">Edit row</a></td> 
</tr> 

있습니다. 이 모든게 잘 작동합니다. 하지만 하나의 취소 버튼이 있어야합니다. 원래 TD를 다시 가져옵니다 (입력 상자가 없습니다). 어떤 아이디어, 어떻게이 기능을 달성하기 위해? 이전에 편집 행 html을 변수에 복사 한 다음 나중에 입력란 html을 바꾸기 취소해야합니까? 도와 줘서 고마워. 사용자가 페이지에 다른 곳을 클릭하면 취소하고 원래 데이터를 다시 가져로

편집

또한, 그것은을 고려해야합니다. 이 행동을 묶는 방법?

Answer 1

우선 - Javascript 프레임 워크를 살펴보십시오. 여러분이 말하는 모든 종류의 기능은 충분히 진보되어 있기 때문에 코드를 모든 브라우저에서 올바르게 작동 시키려면 스스로 그렇게해서는 안됩니다. 그것은 또한 당신이 나쁜 연습으로 간주됩니다 못생긴 인라인 자바 스크립트 등을 무료로 유지할 수 있습니다. 그건, 생각은 여기있어 :

당신은 항목 당 두 개의 행을 가지고 있다고 생각하십니까, "편집에서 행 중 하나 모드 "와 행 중 하나가"정상 모드 "입니까? 기본적으로 숨겨진 '수정 모드'행의 스타일을 지정할 수 있습니다. 사용자가 수정 링크를 클릭하면 해당 행을 숨기고 수정 된 행을 숨길 수 있습니다. 이것은 편집 폼을 얻기 위해 AJAX 호출을하는 것보다 쉽습니다.

편집

Here's some code to get you started :

function editRow(row_id, callback) { 
    // you would get this dynamically through ajax, thus why we need the callback 
    var html = '<tr id="edit_' + row_id + '" class="edit"><td><input type="text" name="td_1" value="Text 1"></td><td><input type="text" name="td_2" value="Text 2"></td><td><input type="submit" name="submit" value="submit"></td></tr>'; 
    callback(html); 
} 

$('a.edit', '#data').click(function() { 
    var $tr = $(this).closest('tr'); 
    var id = $tr.attr('id').split('_').pop(); 
    var edit_row = '#edit_' + id; 
    if($(edit_row).length == 1) { // edit row already exists 
     $tr.hide(); 
     $(edit_row).show(); 
    } else { // doesn't exist, fetch it 
     editRow(id, function(html) { 
      $tr.hide(); 
      $tr.after(html); 
     }); 
    } 
    return false; 
}); 

$(window).click(function(e) { 
    $('tr.edit:visible').each(function() { 
     var $tr = $(e.target).closest('tr'); 
     var id = $(this).attr('id').split('_').pop(); 
     console.log(e.target, $tr, this); 
     if($tr.attr('id') != this.id) { 
      $(this).hide(); 
      $('#row_' + id).show(); 
     } 
    }); 
}); 

아마 당신을 위해 많이 할 jQuery를 플러그인을 많이 참고하고 응용 프로그램의 필요에 따라해야 당신 매번 행을 가져오고, 전혀 가져 오지 않는 것이 좋습니다. 이것은 원하는 것을 얻기 위해해야 ​​할 일의 대략적인 아이디어 일뿐입니다. 나머지는 당신에게 달린 것입니다. :)

Answer 2

jQuery를 사용하여 초기 기능을 얻으려고 생각하면 jEditable 플러그인을 볼 수 있습니다. 이것은 매우 유용한 플러그인으로 일부 텍스트를 클릭하고 편집 가능한 영역을 만들고 취소 할 수 있습니다. 사용자가 확인 또는 저장을 클릭하면 원본으로 되돌릴 필요가 없습니다. 문제입니다. jEditable이이를 처리합니다.