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中的一个特定按钮，即元素：

 <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”或类似的东西，这样我就知道它确实有效... < / p>

总结一下我在这里想要实现的目标：

获取触发onclick事件的行索引（仅btnEdit点击，而不仅仅是点击）
首先将链接的文字更新为“Clicked”

有人能帮助我吗？

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

});

jQuery获取触发事件的行并更新表中的特定td

2 个答案: