jQuery Datatable、htmlテキストボックスで選択した行データを編集する

Question

私はかなり新しくコーディングしています。私はjQueryデータテーブルを持っています。行を選択すると、その行のtdsがテーブルの上にhtmlテキストボックスを埋めます。私はそれらのテキストボックスに（そして保存ボタンを押すと）入力されたものがあれば、その行に保存されるようにしようとしています。

現在、私は1フィールド/ tdを保存しています。列0を押して、名前のテキストボックスに入力して保存を押すと、保存されます。しかし、どのコラムでも動作します。正しいtdを編集する必要があります。さらに、1つのTDだけでなく、行全体を編集したい。私はこれを達成する方法がわかりません。助けてくれてありがとう！

JSFiddle

Javascriptを：

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/