javaScript를 통해 작업을 롤백하는 방법은 무엇입니까?

Question

사용자가 행으로 구성된 테이블과 함께 표시되는 JSP 페이지가 있습니다. 사용자가 원하는 경우 새 행을 추가하고 저장 버튼을 누르면 자바 스크립트를 통해 수행되는 데이터가 테이블에 삽입됩니다.

내 요청은 사용자가 새 행을 추가하고 세부 정보를 입력한다는 것입니다. 사용자가 리셋 버튼을 클릭하면 새 행에 입력 된 데이터가 지워지지만 사용자가 시작했을 때 표시되었던 원래 데이터를 모두 제거하지는 않습니다.

도와주세요.

Answer 1

새로운 내용과 그렇지 않은 내용을 감지 할 수 있습니다.

여러 가지 방법이 있습니다. 확실히 jQuery 또는 다른 자바 스크립트 라이브러리를 사용합니다.

는 jsFiddle에서 내 jQuery를 예를 참조하십시오 http://jsfiddle.net/Xvm9L/

나는 새 행에 추가 속성을 추가했습니다. isnew 속성이 true 인 행을 제거하십시오. New Row (새 행) 버튼을 클릭 할 때이 속성을 행에 추가해야합니다. 나는 귀하의 질문에 두 부분으로되어 생각 http://jsfiddle.net/Xvm9L/1/

Answer 2

: 여기

---

일반 자바 스크립트와 함께 작동 버전입니다 첫째, 새로운 행을 삭제해야합니다; 둘째, AJAX를 사용하여 서버의 데이터를 업데이트하는 경우 재설정을 동기화하는 것을 잊지 마십시오.

@ 321X 각 행에 속성을 추가하기 만하면 쉽게 지울 수 있습니다. 행을 추가 할 때 고유 식별자를 사용하는 다른 객체에 데이터의 각 객체를 저장하는 것이 좋습니다. 각 항목을 반복하고 서버를 업데이트 할 수 있습니다 (필요한 경우). 다음은 몇 가지 거친 JS-의사 에스크 코드 ($ === jQuery)입니다 :

var newRowsList = {}; 

$('.addRow').click(function(ev) { 
    var newRow = {}; 
    // populate newRow with user-data and add it to the master list 
    newRowList[ /* uid */ ] = newRow; 
    // if you are using AJAX to sync row-by-row changes: 
    $.ajax({ 
     // url, post, etc... 
     success : function() { 
      // now generate the DOM elements however you want 
      // add the new row to the table 
      $(/* row data */).appendTo('#dataTable'); 
     } 
    }); 
}); 

$('#resetTable').click(function(ev) { 
    for (var i in newRowsList) (function(item, data) { 
     $.ajax({ 
      // url, post, etc... 
      success : function() { 
       // destroy the row by using the uid passed in 
       $('.' + item).remove(); 
       // and remove the item from the list 
       newRowsList[ item ] = null; 
      } 
     }); 
    })(i, newRowsList[ i ]); 
}); 

꽤하지 않습니다, 그러나 희망이 점을 설명합니다. 고급 기능이 필요한지 여부에 따라 제거 된 항목을 시퀀스 목록에 추가하여 실수로 재설정 버튼을 클릭하면 변경 사항을 되돌릴 수 있습니다.