jQuery獲取觸發事件的行並更新表中的特定td

Question

我試圖捕獲觸發表中事件的行的索引，如下所示：

<tr>
 <td class="sorting_1" style="text-align:left;" width="10%">
 <a  class="btnWatchList" value="1"><i class="fa fa-edit"></i></a>
 <a class="deleteBulkItem" value="2"><i class="fa fa-trash"></i></a>
 </td>
</tr>

我做了這樣的事情：

$("#datatable-responsive").delegate("tr", "click", function (e) {
    var index = $(e.currentTarget).index(); // finding the column index

    console.log($(e.currentTarget).index());
    $('#datatable-responsive tr:eq('+index+') td:eq(2)').text('ChangedText'); // changing the text

});

所以這是棘手的部分，我不希望僅在任何TR CLICK上觸發事件，而是在TR中的特定按鈕上觸發，該按鈕是element：

 <a  class="btnEdit" value="1"><i class="fa fa-edit"></i></a>

然后，當我捕獲觸發事件的行的索引時，然后更新該行的特定列，誰的HTML標記如下所示：

 <td class="sorting_1" width="60%">
 <h5 ><b><a href="Title1Link" id="titleText" value="Titl1" id="linkText" target="_blank">Title1</a></b></h5>
 <h6><b><a href="Title2Link" id="" target="_blank">Title2</a></b></h6>
 </td>

因此，現在我找到觸發事件的列的索引之后，我想首先將鏈接的文本設置為“ Clicked”或類似名稱，以便我知道它確實起作用了...

因此，總結一下我想在這里實現的目標：

• 獲取觸發onclick事件的行索引（僅在btnEdit點擊時，而不是任何tr點擊時）

• 首先將鏈接的文本更新為“已點擊”

有人可以幫我嗎 ？

Answer 1

定位按鈕並使用closest()向上移動至行。 根據顯示的代碼，您甚至似乎都不需要索引，只需要行對象

$("#datatable-responsive").delegate("tr .btnEdit", "click", function (e) {
     var $row = $(this).closest('tr');       
     $row.find('td:eq(2)').text('ChangedText'); // changing the text    
});

請注意，不贊成使用delegate() ，如果您使用的jQuery版本大於1.7，則應使用on()代替

Answer 2

使用類名.deleteBulkItem獲取clcik事件。 然后我們使用最接近值找到父tr。

$("#datatable-responsive").delegate(".deleteBulkItem", "click", function (e) { 

var tr = $(this).closest('tr').index();
$('#datatable-responsive tr:eq('+tr+') td:eq(2)').find('a.eq(0)').text('ChangedText');  

//or you traverse like this 

 var  $tr = $(this).closest('tr');
    $tr.find('td:eq(2)').find('a.eq(0)').text('ChangedText');

});