尝试更新DOM中的HTML表值时出错

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");

问题是这个代码在我的表中有一行内容，所有行都使用“新值”进行更新。我对jquery很新，我不知道如何解决这个问题，所以任何帮助都会受到赞赏。

这是我的表结构：

Answer 1

由于您的HTML代码信息不多

var selectedTR;

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

假设保存按钮的 ID 为 #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");
})

如果您有兴趣，也可以使用此插件（高级功能）datatable inline edit

Answer 2

find正在使用的选择器过于笼统，因此他们选择了所有匹配的行。

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

这是jQuery在特定代码行中所做的事情（同样的事情也适用于所有其他代码）：

• 按ID
获取lblEditDeleteProducts
• 使用该节点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");
            }
         }
    });
});