jQuery Datatable，使用html文本框編輯選定的行數據

Question

我是編碼新手。 我有一個jQuery數據表，當我選擇一行時，該行的tds填寫了表格上方的html文本框。 我正在嘗試將其輸入到這些文本框中（並按保存按鈕），然后將其保存到該行中。

目前我有它，所以它節省了1個字段/ td。 如果按第0列，請填寫“名稱”文本框，然后按保存，它將保存。 但它適用於任何列。 它只能編輯正確的td。 另外，我要編輯整個行，而不僅僅是一個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);
        });


})();`

我已經用到目前為止嘗試過的代碼更新了代碼。 當前，我在文本框中鍵入的內容正確顯示在控制台中（按保存行按鈕時），現在我不知道如何將其保存到表中。

Answer 1

我認為這是mor響應表中的編輯數據。

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/