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

Question

I want to alter HTML Table row which is inserted by dynamically.

At beginning there will no rows in table.

HTML Code

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

   </tbody>
</table>

JQUERY Code

    //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());

});

Those 3 records are added dynamically. When user wants to modify the value of any FieldName of Values ,Once user click that row from the table, the value will show on Filter Value textbox as you can see above .

In the above pic, User select second row. once the user change the value in textbox and when they click the Change button the second row should alter.

Answer 1

Assuming your table id as YOURTABLEID and your textbox id as FILTERVALUETEXTBOX

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

If you want to click on tr and want to get second td value, then

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

Once you get your td value in textbox, Change button click event will be as follow

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

UPDATE

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

});