Robert Ross Robert Ross - 2 months ago 8
HTML Question

Bug when trying to update an HTML table value in the DOM

I am trying to implement a simple update functionality for the values in my table. I have an edit button, which triggers a modal where I edit the values and save them. In order the values to be immediately update in the DOM I am using the following jquery code

on save
:

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


The problem is that with this code intead of one row in my table all the rows get updated with the "new value". I am very new to jquery and I am out of ideas how to solve this, so any help will be appreciated.

Here is my table structure :

enter image description here

Answer

As there is not much information of your HTML code

var selectedTR;

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

Let assume the ID of save button is #save

$("#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");
})

If you are interested you can use this plugin also (advanced feature) datatable inline edit