jQuery Datatable, editing selected rows data with html text boxes

Question

I'm fairly new to coding. I have a jQuery datatable, and when I select a row, the tds of that row fill out html textboxes above the table. I'm trying to make it so whatever is entered into those textboxes (and upon pressing the save button), is then saved into the row.

Currently I have it so it saves 1 field/td. If I press on column 0, fill out the Name textbox and press save, it saves. But it works on any column. It should only be editing the correct td. Plus I want to edit the entire row, not just one td. I'm not sure how to accomplish this. Thanks for any help!

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);
        });


})();`

I've updated my code with what I've tried so far. Currently, what I type in the textboxes, correctly is displayed in the console (upon hitting the saverow button), now I cant figure out how to save that into the table.

Answer 1

i think it is mor responsive to edit data right in the table.

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/