CODEWITHSUNDEEP
jquery
Sachin
Sachin

Reputation: 18777

How to find out which table row was clicked using jQuery?

I am using 'live' function to do some on-click stuff on table rows, i.e. 

$("tr").live('click',function() {
      alert('Some table row is clicked');
});

I want to find out which row is clicked and using if-else, give some custom alert based upon that. Can anyone tell me how to do it?

Thanks a lot.

EDIT 1:

Is there a way by which I can refer to the elements of the clicked row inside the function?

Upvotes: 1

Views: 10790

Answers (7)

Anwar
Anwar

Reputation: 672

Let me suggest an easy way. Suppose this is your table:

<table>
<tr id = '1' class="tr">...</tr>
<tr id = '2' class="tr">...</tr>
<tr id = '3' class="tr">...</tr>
</table>

Place this in your jQuery code:

$(function(){

$('.tr').click(function(){
var row_no = $(this).attr('id');
alert('Row number '+row_no+' was clicked');
});

});

Hope this helps you.

Upvotes: 2

KBN
KBN

Reputation: 2984

Demo : http://jsfiddle.net/zJUuX/

HTML :

<table>
    <tr><td>hey</td></tr>
    <tr><td>hi</td></tr>
</table>

Jquery:

$("table tr").click(function(){
    messages( $(this).index() );
});

    function messages(index) {
        switch(index){
            case 0:
                alert("you clicked 1st row");
                break;
            case 1:
                alert("you clicked 2nd row");
                break;
            default:
                break;
        }
        $("table tr").eq(index).css("background","#ff0");
        $("table tr").eq(index).find("a"); //will find all the nested anchor tags.
    }

There you go Learner, now I shall accept my virtual points :D. Have fun.

Upvotes: 1

miguelr
miguelr

Reputation: 1344

As an improvement on gdoron's answer jQuery's live() is deprecated, try delegate or on:

$("#mytable").delegate("tr", "click", function(e) {
  if (this == "foo") {
     ....
  }
});

Upvotes: 0

gdoron
gdoron

Reputation: 150313

$("tr").live('click', function() {
    if (this.id == "foo") {
        alert('the tr with the foo id was clicked');
    }
});​

If you want to check which row number, use index:

$("tr").live('click', function() {
   if $(this).index() === 2) {
     alert('The third row was clicked'); // Yes the third as it's zero base index
   }
});​

Live demo

Update:

$("tr").live('click', function() {
    // "this" is the clicked <tr> element
    // $(this).find('td span') is the spans inside a td inside the clicked <tr>
}

Upvotes: 6

Sameh Serag
Sameh Serag

Reputation: 746

First you shouldn't use .live() ever :)

why you shouldn't use .live()

you can use instead .delegate()
Example

$(document).delegate("tr", "click", function(e) {
 // write your code here 
});

Upvotes: 2

Dips
Dips

Reputation: 3290

//Even row
$("tr:even").click(function() {
    alert('Even');
});

//Odd row
$("tr:odd").click(function() {
    alert('Odd');
});​

Upvotes: -1

Dan F.
Dan F.

Reputation: 1363

You have access to the clicked element using this.

offtopic: $.live is deprecated since 1.7, you should be using $.on. See here for more info.

Upvotes: 0

Related Questions