편집, 삭제, 생성하기위한 명령 단추가있는 HTML 테이블 (XML 바인드)

Question

XML 파일이있어서 레코드를보고 작성하고 편집하고 삭제하고 싶습니다. 이제 xml 파일을 읽을 수있게되었고 적절한 부트 스트랩 테이블을 만들었습니다. 밖에 좋은 라이브러리가 있다는 것을 알고 있지만 부트 스트랩을 사용하고 싶습니다.

$(document).ready(function(){ 
     $.ajax({ 
      type: "GET", 
      url: "Data/gameData.xml", 
      dataType: "xml", 
      success: function(xml) { 
       $(xml).find('games').each(function(){ 
        var Col0 = $(this).find('id').text(); 
        var Col1 = $(this).find('name').text(); 
        var Col2 = $(this).find('difficulty').text(); 
        var Col3 = $(this).find('numberOfRisks').text(); 
        var Col4 = $(this).find('budget').text(); 
        var Col5 = $(this).find('numberOfWorkers').text(); 
        var Col6 = $(this).find('overtimeWorkers').text(); 
        $('<tr></tr>').html('<th>'+Col0+'</th><td>'+Col1+'</td><td>'+Col2+'</td><td>'+Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td><td>'+Col6+'</td>').appendTo('#gamedefinitions'); 
       }); 
      }); 

내 결과 :

이

내가 데이터를 가져 오지하기 위해 사용하고 코드입니다

을 그리고 이것은 내 결과 방법을 예입니다

Answer 1

을 이것은 버튼을 추가 한 방법입니다.

$(document).ready(function loadGameData(){ 
     $.ajax({ 
      type: "GET", 
      url: "Data/gameData.xml", 
      dataType: "xml", 
      success: function(xml) { 
       $(xml).find('game').each(function(){ 
        var Col0 = $(this).attr('id'); 
        var Col1 = $(this).find('name').text(); 
        var Col2 = $(this).find('difficulty').text(); 
        var Col3 = $(this).find('numberOfRisks').text(); 
        var Col4 = $(this).find('budget').text(); 
        var Col5 = $(this).find('numberOfWorkers').text(); 
        var Col6 = $(this).find('overtimeWorkers').text(); 
        $('<tr></tr>').html('<th>'+Col0+'</th><td>'+Col1+'</td><td>'+Col2+'</td><td>' 
          +Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td><td>'+Col6 
          +'</td><td><div class="btn-group"><button class="btn btn-success" type="button" onclick="javascript:selectRow(this); return false;">Velg</button>\<' + 
          'button class="btn btn-warning" type="button" onclick="javascript:editRow(this); return false;">Endre</button>\<' + 
          'button class="btn btn-danger" type="button" onclick="javascript:deleteRow(this); return false;">Slett</button></div></td>').appendTo('#gamedefinitions'); 
       }); 
      } 
     }); 
    });