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

Question

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>

When user click ADD ButtonIt will be added rows using jquery successfully

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.

@Hemal that is not the problem now, I got the output to add the rows in table dynamically. Now I want to get the row records using jquery when user click any rows after it added — mohamed faisal
– mohamed faisal, Commented Feb 2, 2017 at 7:49

Hemal · Accepted Answer · 2017-02-02 07:59:53Z

1

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

edited Feb 2, 2017 at 7:59

answered Feb 2, 2017 at 7:49

Hemal

3,7622 gold badges27 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mohamed faisal Over a year ago

but it's displaying all the HTML Elements. I wants to alert only those two td values

Hemal Over a year ago

Select as answer if it helped

TechVision · Accepted Answer · 2017-02-02 07:53:21Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related