jquery - Get Value of HTML cells in row clicked with Javascript

Question

I am populating a html table based on data stored in parse.com. So the table is dynamically populated, I am including editing options for the user to add, delete and edit a row. I have managed to incorporate delete and add to the table however, my problem is I need to get the data in the cells of the row on which I click the edit button... So what I want to do is when the user clicks on the edit button I'll open a dialog with the table row in it populated with the data in the row they have clicked, in this dialog they can change data and save. I've attached a screenshot of a sample table. So if the user clicks on the edit button on the second row, I need to obtain the data in each cell to populate the dialog.

Here is what I have tried:

    var par = $(this).parent().parent(); //table row
    var tdUuid = par.children("td:nth-child(1)");
    var tdProx = par.children("td:nth-child(2)");
    var tdOffer = par.children("td:nth-child(3)");

    alert(tdUuid.html()); //for testing

This comes up as undefined.

I've also tried:

var value = $(this).children().get(1).text();

I've tried to display this in an alert but the alert doesn't display so I'm assuming this is way wrong...

If anyone could help me I'd greatly appreciate it. I'm VERY new to html/javascript and I'm feeling my way around in the dark!

EDIT Here is my html as requested:

<div id="EditDialog" title="Edit iBeacon">
            <p class ="editInfo">
                Please edit fields and click save
            </p>
            <table id ="editingTable" class ="beaconTable ">
                <thead>
                <tr>
                    <th>UUID</th>
                    <th>Proximity</th>
                    <th>Offer</th>
                </tr>
                 </thead>
                 <tbody></tbody>
            </table>
            <button id ="saveButton" class ="btnSave">Save</button> <button id ="cancelButton" class ="btnCan">Cancel</button> 

        </div>

        <div id= "tableContainerHolder">
            <div id = "tableContainer">
                <button id ="buttonAdd">Add iBeacon</button>
                <table id ="iBeaconTable" class ="beaconTable " >
                    <thead>
                        <tr>
                            <th>UUID</th>
                            <th>Proximity</th>
                            <th>Offer</th>   
                            <th>Editing Options</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <script>
            $(function() {
                $("#EditDialog").dialog({
                    autoOpen: false
                });
            });
        </script>

FURTHER EDIT

Here is how I populate my table:

 $('#iBeaconTable').append('<tr><td id = "uuid">' + object.get('uuid') + '</td><td = "proxId">' + object.get('proximity') + '</td><td = "offerId">' + object.get('offer_content') + '</td><td><Button id = "btnEdit" onclick = "openDialog()">Edit</Button><Button id = "btnDelete" onclick = "Delete()">Delete</Button></td></tr>');

So I add the buttons each time in each row.

additional edit

Apologies for omitting code

function openDialog() {

    var par = $(this).parent().parent(); //table row
    var tdUuid = par.children("td:nth-child(1)");
    var tdProx = par.children("td:nth-child(2)");
    var tdOffer = par.children("td:nth-child(3)");

     $("#EditDialog").dialog("open");

    $('#editingTable').append('<tr><td id = "uuid">' +tdUuid.innerHTML+ '</td><td = "proxId">' + tdProx.html()+ '</td><td = "offerId">' +  tdOffer.html());

}

The code in the openDialog() is what I had originally posted.

Answer 1

values in table are selected only after adding data dynamically. To get td values

var tr = $(this).closest('tr')
var tdUuid = $(tr).find('td').eq(0).text();
var tdProx = $(tr).find('td').eq(1).text();
var tdOffer = $(tr).find('td').eq(2).text();

Hope this should work.