セル内のアンカーからテーブル行オブジェクトにアクセスする方法は？

Question

私はいくつかの行のテーブルを持っています。私は、関数populateRow（）をトリガーするアンカーと同じ行にある値でセルにアクセスしたい。 （私はそれを明確な方法で説明したいと思う）。 これを行う方法はありますか？

<tr> 
    <td> 
     some value 
    </td> 
    <td> 
     <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" onclick="populateRow();">update</a> 
    </td> 
</tr> 
<tr> 
    <td> 
      another value 
    </td> 
    <td> 
     <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left" onclick="populateRow();">update</a> 
    </td> 
</tr> 

Answer 1

populateRow()機能がクリックされたアンカーを知る必要があるだろう、そう言ったにあなたはそれを参照を与えるために、それにthisを渡すためにどちらかの必要があるだろうアンカー：

onclick="populateRow(this);" 

function populateRow(anchor) { 
    var row = $(anchor).closest("tr"); 
    var firstCellValue = row.find("td").first().text(); 
} 

...とここから.closest()を使用して、DOMを含むtr要素に移動します。

または、より良い、むしろすべての行にインラインでそれを置くよりも、jQueryを使ってクリックイベントハンドラをバインドします

$(document).ready(function() { 
 
    $("#idOfYourTable").on("click", "a", function(e) { 
 
    var row = $(this).closest("tr"); 
 
    var firstCellValue = row.find("td").first().text(); 
 
    console.log(firstCellValue); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="idOfYourTable"> 
 
    <tr> 
 
    <td>Value 1</td> 
 
    <td> 
 
     <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">update</a> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Value 2</td> 
 
    <td> 
 
     <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-check ui-btn-icon-left">update</a> 
 
    </td> 
 
    </tr> 
 
</table>

（それを見て、「ファイル名を指定して実行」ボタンをクリックしてください

Answer 2

populateRow()の機能はわかりませんが、最初のtdの値を取得したい場合は、同じtrを試してみてください次のとおりです。

のonclick = "警告（$（この）.closest（ 'TR'）（ 'TD：最初の' を見つける。）テキスト（））"

はあなたが渡したい場合それpopulateRow()機能では、次のことができます。

のonclick = "populateRow（$（この）.closest（ 'TR'）（ 'TDを：最初の' 見つける。）テキスト（））"

または あなたがあなたの関数内で、後でそれを処理後、要素を渡す：

のonclick = "populateRow（本）"

function populateRow(elm) { 
    var val = $(elm).closest('tr').find('td:first').text(); 
    alert(val); 
} 

・ホープ、このことができます。がんばろう！