Robert Ross Robert Ross - 1 year ago 77
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 Source

As there is not much information of your HTML code

var selectedTR;

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

Let assume the ID of save button is #save

 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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download