CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net
mohamed faisal
mohamed faisal

Reputation: 446

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.

Upvotes: 0

Views: 932

Answers (2)

Hemal
Hemal

Reputation: 3760

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

Upvotes: 1

TechVision
TechVision

Reputation: 269

Use a function which has a callback function. Like bellow:

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

How it works:

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

Upvotes: 0

Related Questions