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

Question

I want to get the row records, which is added dynamically. I am getting an output if I add the row using 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>');

Upto this it's working fine. Now, When user clicks on any row, I want to select the row and show it in alert box, which is added dynamcally.

Answer 1

WORKING FIDDLE

动态添加的元素，必须这样绑定(bind)事件。

$(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