There is a html table. It is necessary to do with Jquery, so that when you click on the first cell of any row, the index of the row in which this cell is located is transferred.

Html table:

<table id="mytable" border="1"> <tr> <td>1</td><td>2</td><td>3</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>
  • Table code at least? - Yaroslav Molchan
  • <table id = "mytable" border = "1"> <tr> <td> 1 </ td> <td> 2 </ td> <td> 3 </ 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> - user217053

2 answers 2

 $('td:first-child').click(function(){ console.log($(this).parent().index()); })

    index ();

    When clicking on any cell of the row:

     $('td').click(function(){ var tr = $(this).closest('tr'), index = tr.index(); console.log(index); }); 
     td { border: 1px solid #ccc; padding: 1rem 2rem; cursor: pointer; } 
     <table id="mytable" border="1"> <tr> <td>1</td><td>2</td><td>3</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> <script src="https://code.jquery.com/jquery-2.0.3.js"></script>

    If only the first, then replace td with td:first-child or td:first-of-type :

     $('td:first-of-type').click(function(){ var tr = $(this).closest('tr'), index = tr.index(); console.log(index); }); 
     td { border: 1px solid #ccc; padding: 1rem 2rem; cursor: pointer; } 
     <table id="mytable" border="1"> <tr> <td>1</td><td>2</td><td>3</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> <script src="https://code.jquery.com/jquery-2.0.3.js"></script>

    • Thanks for the detailed and clear answer. - user217053