Can't access row information with save record button inline

Gmartins88

Hello Everyone!

I have a Datatable with a add new row button (** $('#add') **), but since i'm a little green in JS i've made it this way:

 $(function () {
         $('#add').on('click', function () {
            var ctr = 0;
            var tableToUse = document.getElementById('tblSearch_');
            var rowCount = tableToUse.rows.length;
            var row = tableToUse.insertRow(rowCount);

             cols.forEach(function (index) {
                 var cell = row.insertCell(ctr);
                 var element = document.createElement("input");
                 element.id =   index.data;
                 element.type = index.type;
                 element.name = index.name;
                 cell.appendChild(element);
                 ctr++
             });


             var button = document.createElement("input");
                button.type = "button";
                button.value = "Gravar";
                button.id = "Save";
             button.onclick = function () {
                 var body = {}

                 var table = $('#tblSearch_').DataTable();
                 table.rows($(this).parents('tr')).each(function (index) {
                     var row = table.row(index);
                     var data = row.data();
                     data.each(function (v, d) {
                         body[d.id] = $(d).val();
                     });
                 });

                 $.ajax({
                     url: '@Url.Content("~/Parametrization/Detail?handler=updateinsert")',
                     type: 'POST',
                     beforeSend: function (xhr) {
                         xhr.setRequestHeader("XSRF-TOKEN",
                             $('input:hidden[name="__RequestVerificationToken"]').val());
                     },
                     data: JSON.stringify(body),
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     success: function (data, textStatus, jQxhr) {
                         table.draw();
                     },
                     error: function (jqXhr, textStatus, errorThrown) {
                         fnHasFormError(jqXhr.responseJSON.message, 'errorMessages_modal')
                     }
                 });
             };
             cell.appendChild(button);

        });
     });

This way, a new row is created with all the columns in the table and a save button at the end. The problem is that the on-click event in the button doesn't get the Row info...

I've been searching forums in search of ideas but couldn't find anything concrete

How can i get the Row info with the onclick event?

Btw if there's a better way to do this please feel free to point me in the right direction
Thank you all

colin

Hi @Gmartins88 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin