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

});