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/