jQuery Datatable, html 텍스트 상자로 선택된 행 데이터 편집하기

Question

나는 코딩이 새로 도입되었습니다. 나는 jQuery 데이터 테이블을 가지고 있는데, 행을 선택하면 해당 행의 tds가 테이블 위에 html 텍스트 상자를 채 웁니다. 그 텍스트 상자에 입력 된 모든 내용 (그리고 저장 버튼을 누르면)을 행에 저장합니다.

현재 나는 1 개의 필드/td를 저장합니다. 열 0을 누르고 이름 텍스트 상자에 내용을 입력하고 저장을 누르면 저장됩니다. 그러나 모든 열에서 작동합니다. 올바른 td 만 편집해야합니다. 또한 한 행만 편집하는 것이 아니라 전체 행을 편집하고 싶습니다. 나는 이것을 성취하는 방법을 모르겠습니다. 어떤 도움을 주셔서 감사합니다!

JSFiddle

자바 스크립트 :

내가 지금까지 시도했다 내 코드를 업데이 트했습니다

var table = $('#example').DataTable(); 

(function() { 
     var table = document.querySelector('#example'); 
     var name = document.querySelector('#nameinput'); 
     var format = document.querySelector('#formatinput'); 
     var address = document.querySelector('#addressinput'); 
     var report = document.querySelector('#reportinput'); 
     var alarm = document.querySelector('#alarminput'); 



     table.addEventListener('click', onTableClick); 

     function onTableClick (e) { 
     var tr = e.target.parentElement; 

     var data = []; 
     for (var td of tr.children) { 
      data.push(td.innerHTML); 
     } 

     name.value = data[0]; 
     address.value = data[1]; 
     format.value = data[2]; 
     report.value = data[3]; 
     alarm.value = data[4]; 
     console.log(alarm.value); 


     } 
     $("#saverow").click(function() { 
      var table1 = $('#data-table').DataTable(); 
      var data = []; 
      data[0] = name.value; 
      data[4] = alarm.value; 
      console.log(name.value); 
      console.log(alarm.value); 

      table1.draw(true); 
     }); 


})();` 

. 현재 텍스트 상자에 입력 한 내용이 콘솔에 표시되므로 (saverow 단추를 눌렀을 때), 이제 테이블에 저장하는 방법을 알 수 없습니다.

Answer 1

나는 테이블에서 바로 데이터를 편집하는 것이 적절하다고 생각합니다.

HTML :

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Address</th> 
      <th>Format</th> 
      <th>Report Time</th> 
      <th>Alarms</th> 
      <th></th> 

     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Tiger Nixon</td> 
      <td>Tiger@gmail.com</td> 
      <td>email</td> 
      <td>1PM</td> 
      <td>Master</td> 
      <td class="td-button"></td> 
     </tr> 
     <tr> 
      <td>Bill Gates</td> 
      <td>111-111-1111</td> 
      <td>sms</td> 
      <td></td> 
      <td>Master</td> 
      <td class="td-button"></td> 
     </tr> 
    </tbody> 
</table> 

JS :

var table = $('#example').DataTable(); 

$("#example tbody tr").click(function(){ 
if (! $(this).find("button").length) 
{ 
    $(this).find("td").each(function(){ 
    if (!$(this).hasClass("td-button")) 
    { 
     var text = $(this).text(); 
     $(this).html ('<input type="text" value="' + text + '">') 
    } else 
     $(this).html ('<button class="button-save">Save</button>') 
    }) 
} 
}) 

$(document).on("click", ".button-save",function(){ 
    var tr = $(this).parent().parent(); 
    tr.find("td").each(function(){ 
    if (!$(this).hasClass("td-button")) 
    { 
     var text = $(this).find("input").val(); 
     $(this).text(text) 
    } else 
     $(this).html(''); 
    }) 
}) 

https://jsfiddle.net/91wvw619/