如何更改使用Jquery动态插入的表行值？

Question

我想改变动态插入的HTML表格行。

  

一开始，表格中没有行。

HTML代码

<table class="table table-hover " id="queryTable">
   <thead>
       <tr>
           <th>Field Name</th>
           <th>Values</th>
       </tr>
   </thead>
   <tbody>

   </tbody>
</table>

JQUERY代码

    //SELECT Table ROW
$(document).on("click", '#queryTable tbody tr', function () {
    var tr = $(this);
    var FieldName = tr.find("td:first").text();
    var Values = tr.find("td:last").text();

    FieldName = FieldName.replace('AND ', '');
    FieldName = FieldName.replace('OR ', '');

    Values = Values.replace('IN(', '');
    Values = Values.replace(')', '');

    $("#FilterField option[value=" + FieldName + "]").attr("selected", true);
    $("#FilterField").val(FieldName);
    $("#txtFilterValue").val(Values);   //FilterValue textbox id
});

$("#btnChange").click(function () {
    td.text($("#txtFilterValue").val());

});

动态添加这3条记录。当用户想要修改任何字段名称值的值时，一旦用户点击表格中的该行，该值就会显示在过滤值文本框上，如上所示。

在上面的图片中，用户选择第二行。一旦用户更改文本框中的值，当他们点击更改按钮时，第二行就会改变。

Answer 1

假设您的表格ID为YOURTABLEID，文本框ID为FILTERVALUETEXTBOX

var td;
$(document).on("click","#YOURTABLEID td",function(){
    td=$(this);
    $("#FILTERVALUETEXTBOX").val($(this).text());
});

如果您想点击tr并希望获得第二个td值，那么

var td;
$(document).on("click","#YOURTABLEID tr",function(){
    td=$(this).find("td:last"); //AS SECOND TD IS LAST
    $("#FILTERVALUETEXTBOX").val(td.text());
});

在文本框中获得td值后，更改按钮点击事件将如下

$("#btnChange").click(function(){
    td.text($("#FILTERVALUETEXTBOX").val());
});

<强>更新

var td;//THIS IS MISSING IN YOUR CODE
$(document).on("click", '#queryTable tbody tr', function () {
var tr = $(this);
td=$(this).find("td:last");//THIS IS MISSING IN YOUR CODE
var FieldName = tr.find("td:first").text();
var Values = tr.find("td:last").text();

FieldName = FieldName.replace('AND ', '');
FieldName = FieldName.replace('OR ', '');

Values = Values.replace('IN(', '');
Values = Values.replace(')', '');

$("#FilterField option[value=" + FieldName + "]").attr("selected", true);
$("#FilterField").val(FieldName);
$("#txtFilterValue").val(Values);   //FilterValue textbox id
});

$("#btnChange").click(function () {
    td.text($("#txtFilterValue").val());

});