mohamed faisal mohamed faisal - 4 years ago 155
Javascript Question

How to get the HTML Table row records which is added dynamically using Jquery?


I want to get the row records, which is added dynamically. I am getting an output if I add the row using html.


At beginning there will be no records in table. this is my code.

HTML Code

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

</tbody>
</table>


Table with empty row At beginning
When user click ADD ButtonIt will be added rows using jquery successfully

After Added rows by user clicking the ADD Button
JQUERY Code

$('#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 Source

WORKING FIDDLE

The elements which are added dynamically, you have to bind an event this way.

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

Show only td values

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download