Динамическое изменение строк в table через AJAX

295

21 февраля 2017, 16:32

Имеется шапка таблицы с пустым телом

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

Тело заполняется посредством AJAX-запроса, где из базы получатся данные и строится таблица:

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

Таблица создается, заполняется, в последнем столбце создается кнопка Edit. Как при нажатии этой кнопки сделать так, чтобы ячейки в строке, где расположена нажатая кнопка, стали <input type='text'> со значениями в них из этих ячеек, с возможностью редактирования и затем сохранения и отображения изменений?

Answer 1

...
$.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
    // ... 
  }
});