Question: jQuery Datatable, editing selected rows data with html text boxes

Question

jQuery Datatable, editing selected rows data with html text boxes

Answers 1
Added at 2017-11-07 23:11
Tags
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) {
    //console.log(e.currentTarget);
    var tr = e.target.parentElement;
    //console.log(tr.children);

    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];

  }
  var row = null;

$('#example tbody').on('click', 'td', function () {

    $("#nameinput").val($(this).text());
        row = $(this);

            $("#saverow").click(function() {
                if (row != null) {
                row.text($("#nameinput").val());
                }
            });
});

})();`
Answers to

jQuery Datatable, editing selected rows data with html text boxes

nr: #1 dodano: 2017-11-08 06:11

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/

Source Show
◀ Wstecz