Dynamically changing rows in a table via AJAX

Question

There is a table header with an empty body.

<table id="tablem" border="1" width="100"> <thead> <tr> <th style="width: 10%">PageName</th> <th style="width: 5%">Lang</th> <th style="width: 10%">ControlName</th> <th style="width: 70%">ControlValue</th> <th style="width: 5%">Edit</th> </tr> </thead> <tbody> </tbody> </table>

The body is filled with an AJAX request, where data is obtained from the base and a table is built:

 function ForSearching(args, callback) { $.ajax({ url: "/source_pages/SearchForMultilang.ashx", type: "POST", dataType: "json", data: args, }).success(function(data) { var table = $("#tablem tbody"); $("#tablem tbody").empty(); callback(data); $.each(data, function (idx, elem) { table.append('<tr><td>' + elem.PageName + '</td><td>' + elem.Lang + '</td><td>' + elem.ControlName + '</td><td>' + elem.ControlValue + '</td><td><input type="button" id="btnedt" value="Edit" /></td></tr>'); }); }); }

The table is created, filled, the Edit button is created in the last column. How when clicking this button to make the cells in the row where the button is located, become <input type='text'> with the values in them from these cells, with the ability to edit and then save and display the changes?

"the fields in the line where the button has become with the values in them from the column" ??
@Igor, corrected, my jamb - and wrote crookedly, and the code was not first inserted

Accepted Answer · 2017-02-19T15:26:52

 ... $.each(data, function (idx, elem) { table.append('<tr><td data-field="PageName">' + elem.PageName + '</td><td data-field="Lang">' + elem.Lang + '</td><td data-field="ControlName">' + elem.ControlName + '</td><td data-field="ControlValue">' + elem.ControlValue + '</td><td><input type="button" class="btnedt" value="Edit" /></td></tr>'); }); ... function RowToEditMode(aRow) { // ... } function RowCancelEdit(aRow) { // ... } function RowSaveEdit(aRow) { // ... } $("#tablem tbody").on("click", ".btnedt", function(e) { var $row = $(this).closest("tr"); if ($row.hasClass("editmode")) { // save values from inputs in this row // ... $row.removeClass("editmode"); } else { // 1. if there is a row in edit mode revert it to view mode // ... // 2. insert inputs with current values from cells in each cell, // store old values in td data-oldvalue // ... } });

Is everything clear yet?

($ row.hasClass ("editmode")) - here, as I understand it, does editmode turn cells into text fields in which you can edit text?
when we compose data for $.ajax , we use them to name the fields of the object
For good it would be necessary, then, to create, in addition to the Edit button, the Save button, which will replace the Edit when it was pressed, and which will save the entered values, curl and be replaced by Edit again when pressed, is it not?
this is possible, and when you go to editing, you can add a class to tr and focus on it, and you can change the value of the button to Save.
Probably the other button is better, since there is one more needed - to cancel.

Dynamically changing rows in a table via AJAX

1 answer 1

More articles: