如何获取使用Jquery动态添加的HTML表行记录？

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成功添加行

JQUERY代码

$('#queryTable > tbody:last-child').append('<tr><td class="FieldNameID">' + selectedField + '</td><td class="OperatorID"> IN(' + $("#txtFilterValue").val() + ')</td></tr>');

  

到此为止它工作正常。现在，当用户点击任何一行时，我想选择行并在警告框中显示它，这是动态添加的。

Answer 1

WORKING FIDDLE

动态添加的元素，您必须以这种方式绑定事件。

$(document).on("click",'#queryTable tbody tr',function(){
   alert($(this).html());
});

仅显示td值

 $(document).on("click",'#queryTable tbody tr',function(){
   var tr=$(this);
   var firsttd=tr.find("td:first").text();
   var secondtd=tr.find("td:last").text(); //BECAUSE YOU HAVE ONLY 2 TDs
   alert(firsttd + ' ' + secondtd);
});

UPDATED FIDDLE

Answer 2

使用具有回调功能的功能。像吼叫：

function AddNewRow(selectedField,callback){
   var $newRow=$('<tr><td class="FieldNameID">' + selectedField + '</td><td class="OperatorID"> IN(' + $("#txtFilterValue").val() + ')</td></tr>');
   $('#queryTable > tbody:last-child').append($newRow);
   callback($newRow);
}

工作原理：

$(document).on("click",'#selector',function(){
 var selectedField='some value';
  AddNewRow(selectedField,function($tr){
    // $tr is your new Added Tr.
    // Code will goes here
  });
});