Как вставить / обновить строку таблицы в таблице?

У меня есть функция, которая должна вставлять / обновлять записи в таблице. После получения ответа ajax с сервера данные передаются в функцию saveData(obj.DATA). Вот пример:

$.ajax({
    type: 'POST',
    url: 'cfc/save.cfc?method=saveData',
    data: frmData,
    dataType: 'json'
}).done(function(obj){
    if(obj.STATUS === 200){
        saveData(obj.DATA);
    }else{
        alert('Error! Please contact administrator.');
    }
}).fail(function(jqXHR, textStatus, errorThrown){
    alert('Error: ' + errorThrown);
});

obj.DATA с сервера выглядит следующим образом:

{"DATA":{
   "date":"06/27/2019",
   "comment":"Comment Test",
   "rec_id":23517,
   "title":"Test",
   "user":"MI0983",
   "year":2019
   }
}

Тогда последний кусок - это saveData функция, которая должна заполнить объект JS данными и вставьте / обновите строку таблицы. Вот что у меня есть:

    var js Data = {}; // global variable data storage.
    function saveData(data) {
        if(jsData.hasOwnProperty(data.rec_id)) {
             jsData[data.rec_id] = {
                "rec_id": data.rec_id,
                "title": data.title,
                "comment": data.comment
             }

             var tr = $('row_' + data.rec_id);
             tr.empty();                          
        } else {
             jsData[data.rec_id] = {
                 "rec_id": data.rec_id,
                 "title": data.title,
                 "comment": data.comment
             }

             var tr = $('<tr>').prop('id', 'row_' + data.rec_id);
             $('#tbl_my > tbody').prepend(tr);   
        }

        tr.append($('<td>').text(data.title));
        tr.append($('<td>').text(data.user));
        tr.append($('<td>').text(data.date));
        tr.append($('<td>').text(data.year));
        tr.append($('<td>').html('<button class="edit">Edit</button>'));
        tr.append($('<td>').html('<button class="delete">Delete</button>'));
  }

Мне интересно, есть ли лучший способ для вставки / обновления строк таблицы. Как видите, я храню только три поля данных в объекте JavaScript (jsData), так как эти три используются в форме. Только эти поля могут быть обновлены пользователем. Другие поля используются только для отображения. Кроме того, мне интересно, если это хорошая практика, чтобы вернуть вставленные данные с сервера (что я делаю в моем коде выше, как только процесс ajax завершен), или я должен очистить данные из объекта формы? Если у кого-то есть предложения, пожалуйста, дайте мне знать. Спасибо.

-1
задан espresso_coffee 27 June 2019 в 17:58
поделиться