Question

在我的HTML表格中，每一行都有单独的ID。每行中都有一列包含一个按钮。我可以捕获那些按钮的点击事件。有没有办法在该按钮的单击事件中获取相应的行ID

样本表如下所示。

<table>
 <tr id="1">
     <td>   <input type="image" id="Bttn_play" src="../../Content/images/play_button.png" name="image" /> </td>
     <td> test dat1a</td>
 </tr>
 <tr id="2">
     <td>   <input type="image" id="Bttn_play" src="../../Content/images/play_button.png" name="image" /> </td>
     <td> test data2</td>
 </tr>
</table>

我可以使用以下jQuery

捕获按钮的click事件

$("#Bttn_play").live('click', function (event) {
  alert (row id);
  // how i get row id  corresponding to this button 
}

Answer 1

使用closest()：

$("#Bttn_play").live('click',function(){
    alert($(this).closest('tr').attr('id'));
});

值得注意的是，重复的id无效，id 必须在文档中是唯一的，您应该将id='Bttn_play'转换为class='Bttn_play' （并将jQuery选择器修改为：$('.Bttn_play')）。

<小时/> 已编辑以回应OP的提问（在评论中提问）：

如何使用单个jquery捕获这些按钮的click事件？我动态生成这个表。我认为id需要捕获事件

要使用jQuery选择元素，可以使用class属性（如上所述）或元素类型。在这种情况下，要选择input的{{1}}元素：

type="image"

或者：

$('input[type="image"]')

参考文献：

Answer 2

我会使用jQuery .parent() method。

给出一个代表的jQuery对象一组DOM元素，.parent（）方法允许我们搜索 DOM中这些元素的父母树并构造一个新的jQuery对象来自匹配元素。

$("#Bttn_play").live('click', function (event) {

    var rowID = $(this).parent().parent().attr('id');
});

这是一个有效的演示：http://jsfiddle.net/H9rpp/

我希望这会有所帮助。

Answer 3

$("#Bttn_play").live('click', function (event) {
  alert ($(this).parent().parent().attr("id"));

}

单击该行中的按钮，使用jQuery获取行ID

3 个答案: