Question

83

How to get td values from dynamically created table

rated 0 times [ 90] [ 7] / answers: 1 / hits: 7190 / 10 Years ago, thu, november 13, 2014, 12:00:00

I see a lot of similar questions but not one that directly targets my problem. The business logic of my problem is that I allow the user to open a jQuery Dialog where I create table loaded with a data from a database and when the user make a choise I load the selected data info fields from the main screen.

My current problem is with collecting the data from the <tr> which happens on button click. If it was a hard coded table I would just:

$(selector).on('click', function(){

  var $item = $(this).closest(tr).find('td');

})

and then do something with $item however the table is created dynamically (from Ajax request) everytime the Ajax request is made the table is destroyed and recreated so basically I can't or at least I don't know a way to use some sort of selector to which to bind the event so I can reproduce the above code.

Instead in the dynamic table I have this:

      <td><button onclick=getData();return false>Select</button>

The problems with this (at least how I see it) are two - first, the using of onclick inside HTML element. From what I know it's not a good practice and there are better alternatives and I would appreciate answer showing this. Also, even though I go with this code I'm yet unable to extract the text from each <td> in:

function getData() {

...

}

I tried several approaches including the one which was working with the static table and the binded event handler.

At the end here is a JS Fiddle example where I think I made it clear what I can and what I can not do, so you can refer to it.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pranavrorys

Add To Favorites

Follow

Total Points: 466

Total Questions: 87

Total Answers: 115

Location: Barbados

Member since Sun, Nov 27, 2022

2 Years ago

pranavrorys questions

1 'unsafe-eval' is not an allowed source of script

Fri, May 27, 22, 00:00, 2 Years ago

1 How do I run Hardhat with the --constructor-args parameter?

Thu, Oct 28, 21, 00:00, 3 Years ago

1 Task :react-native-webview:compileDebugJavaWithJavac FAILED

Sat, May 30, 20, 00:00, 4 Years ago

1 In React-Table, how to check/uncheck all checkboxes in a row or column

Tue, Mar 3, 20, 00:00, 4 Years ago

1 How to get value of jquery nice select

Fri, Dec 20, 19, 00:00, 5 Years ago

View All

answered 10 Years ago jonrened · Accepted Answer

Check this fiddle

$(selector).on('click', function(){

  var $item = $(this).closest(tr).find('td');

})

Using the above code you are binding a direct event but the one which you want is delegated event

To use delegated event you should use like

$(document).on('click',selector, function(){

  var $item = $(this).closest(tr).find('td');

})

so your final code will look something like

$(document).on('click','.get-data' ,function(){

    var $item = $(this).closest(tr).find('td');

    $.each($item, function(key, value){

        alert($(value).text());

    })

});

document can be anything which is parent to the table which is going to be created.

Dont forget to add the selector while adding a new table element