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

【问题标题】：jQuery getting the row that triggered the event and updating specific td in tablejQuery 获取触发事件的行并更新表中的特定 td
【发布时间】：2017-10-14 04:12:50
【问题描述】：

我正在尝试在我的表中捕获触发事件的行的索引，如下所示：

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

所以现在一旦我找到触发事件的列的索引，我想首先将链接的文本设置为“已单击”或类似的内容，这样我才能知道它确实有效...

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

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

有人可以帮帮我吗？

【问题讨论】：

$("#datatable-responsive").delegate(".deleteBulkItem)", "click", function (e) { });像这样改变你的选择器
而只是 TR 中的一个特定按钮 - 如果您只想在该按钮单击时触发它，为什么不将单击事件绑定到该按钮？
@Pete 你能给我看一个简单的例子吗？
@Pete 如果你的意思是像 JYoThl 发布的那样，我就是这样做的，但我总是将索引作为值 0 ...？
@JYoThI 如果我这样做，那么对于任何点击的行，我总是得到 index = 0 ...？

标签： javascript jquery html onclick html-table

【解决方案1】：

使用类名 .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');

});

【讨论】：

对tr使用全局变量的坏习惯
遍历也给出。请检查我的更新答案@charlietfl

【解决方案2】：

使用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()

【讨论】：

查理嘿，非常感谢您的回复:) ...这种更改文本的方式不是我想要实现的，这样我实际上会用文本更新整个列：“ ChangedText”，但我不想更新这一行中的整个单元格 2，而只是更新 td 内的这一部分：
Title1
所以将你需要的选择器添加到find()
$row.find('td:eq(2)').find('a:eq(0)').text('ChangedText');
有两个锚标签。不是问题吗？ @charlietfl
相应地调整选择器。您确实没有指定所需的确切行为。向您想要修改的内容添加一个类会有所帮助