How to tell which row number is clicked in a table?

Question

I have a table like the following:

<table>     <tr>        <td>1</td><td>1</td><td>1</td>     </tr>     <tr>        <td>2</td><td>2</td><td>2</td>     </tr>     <tr>        <td>3</td><td>3</td><td>3</td>     </tr>  </table>

When a user clicks on the table, how can I get the index of this row (tr element)?

For example, when I click on the first tr (with 1s in the above table), it should pick it up and return 1.

Answer 1

This would get you the index of the clicked row, starting with one:

$('#thetable').find('tr').click( function(){  alert('You clicked row '+ ($(this).index()+1) );  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id="thetable">     <tr>        <td>1</td><td>1</td><td>1</td>     </tr>     <tr>        <td>2</td><td>2</td><td>2</td>     </tr>     <tr>        <td>3</td><td>3</td><td>3</td>     </tr>  </table>

If you want to return the number stored in that first cell of each row:

$('#thetable').find('tr').click( function(){   var row = $(this).find('td:first').text();   alert('You clicked ' + row); });