CODEWITHSUNDEEP
jqueryhtml
Null Pointer
Null Pointer

Reputation: 9289

Get row id using jQuery while clicking a button in that row

In my HTML table, each row have separate id. There is column in each row that contain a button. I can capture click event of those buttons. Is there any way to get the corresponding row id in click event of that button

Sample table is shown below.

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

I can capture click event of the button using following jQuery

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

Upvotes: 3

Views: 20140

Answers (3)

Hristo
Hristo

Reputation: 46467

I would use the jQuery .parent() method.

Given a jQuery object that represents a set of DOM elements, the .parent() method allows us to search through the parents of these elements in the DOM tree and construct a new jQuery object from the matching elements.

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

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

Here's a working demo: http://jsfiddle.net/H9rpp/

I hope this helps.

Upvotes: 2

David Thomas
David Thomas

Reputation: 253308

Use closest():

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

It's worth noting that a duplicate id is invalid, an id must be unique within the document, you should convert id='Bttn_play' to class='Bttn_play' (and modify the jQuery selector to: $('.Bttn_play')).

Edited in response to OP's question (in comments to question):

how can i capture click event of those buttons using a single jquery? I am generating this table dynamically.I think id is require to capture events

To select an element, using jQuery, it's possible to use the class attribute (as above), or the element-type. In this instance, to select an input element of type="image":

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

Or:

$('input:image')

References:

Upvotes: 13

Jishnu A P
Jishnu A P

Reputation: 14382

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

}

Upvotes: 1

Related Questions