獲取用Javascript單擊的行中的HTML單元格的值

Question

我正在根據存儲在parse.com中的數據填充一個html表格。所以表格是動態填充的，我包括編輯選項以供用戶添加，刪除和編輯一行。我已經設法將刪除和添加到表中，但是，我的問題是我需要獲取單擊編輯按鈕的行的單元格中的數據...所以我想要做的是當用戶單擊在編輯按鈕上，我將打開一個對話框，其中的表格行填充了他們點擊的行中的數據，在這個對話框中，他們可以更改數據並保存。我附上了一個示例表的截圖。所以如果用戶點擊第二行的編輯按鈕，我需要獲取每個單元格中的數據來填充對話框。

這是我曾嘗試：

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 

這出來作爲未定義。

我也試過：

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

我已經試過在警報顯示這一點，但警告不顯示，所以我假定這是錯誤的方式...

如果有人能幫助我，我會非常感激。我非常新的HTML/JavaScript，我感覺我的方式在黑暗中！

編輯 這裏的要求我的html：

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

進一步編輯

這是我如何填充我的表：

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

所以我添加的按鈕每次在每一行中。

額外編輯

道歉省略代碼

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

} 

在openDialog()的代碼是什麼我原本張貼。

Answer 1

只有在動態添加數據之後，纔會選擇表中的值。獲得td值

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

希望這應該工作。