Ошибка при попытке обновить значение таблицы HTML в DOM

Question

Я пытаюсь реализовать простую функциональность обновления для значений в моей таблице. У меня есть кнопка редактирования, которая запускает модальный, где я редактирую значения и сохраняю их. Для того значения, чтобы немедленно обновить в DOM Я использую следующий код JQuery on save:

$('#lblEditDeleteProducts').find("tr .nameDom").text("new val"); 
$('#lblEditDeleteProducts').find("tr .brandDom").text("new val"); 
$('#lblEditDeleteProducts').find("tr .priceDom").text("new val"); 

Проблема является то, что с этим кодом Intead из одной строки в моей таблице все строки обновляются с «новое значение». Я очень новичок в jquery, и я не в курсе, как это решить, поэтому любая помощь будет оценена.

Вот моя структура таблицы:

Answer 1

Поскольку существует не так много информации о вашем HTML код

var selectedTR; 

$("#lblEditDeleteProducts tr").click(function(){ 
    selectedTR=$(this); 
    //init your modal pop up here or do it globally 
}) 

Пусть предположим ID кнопки сохраняемого Сохранять

$("#save").click(function(){ 
selectedTR.find(".nameDom").text("new val"); // get relative value from the mdoal input 
selectedTR.find(".brandDom").text("new val"); 
selectedTR.find(".priceDom").text("new val"); 
}) 

Если вы заинтересованы вы можете использовать это плагин также (расширенная функция) datatable inline edit

Answer 2

Селекторов, что find является использование слишком общий, поэтому они выделение всех совпадающих строк.

$('#lblEditDeleteProducts').find("tr .nameDom").text("new val"); 

Вот что JQuery делает с этой конкретной строке кода (то же самое относится и ко всем остальным тоже):

• Получить lblEditDeleteProducts по ID
• Используя этот узел, find() все элементы-потомки, которые соответствуют селектору tr .nameDom
• Обновить текст всех найденных узлов.

В вашем случае этот селектор соответствует каждому элементу в каждой строке, потому что все они являются потомками #lblEditDeleteProducts; нет способа отфильтровать только те, которые вы хотите, с кодом, который вы написали.

Вам понадобится способ явно определить, какую строку обновить.

Answer 3

Основано на Ваш комментарий о том, что кнопка правка в каждой строке, вы можете ссылаться на соответствующую строку с closest

$("EDIT BUTTON SELECTOR").click(function(){ 
    var $btn = $(this); 
    var $row = $btn.closest("tr"); 
    $("DIALOG SELECTOR").dialog({ 
     buttons:{ 
      Save: function(){ 
        //bunch of stuff 
        $row.find("td.nameDom").text("new val"); 
      } 
     } 
    }); 
});