jQueryでテーブルの行インデックスを取得する

Question

ユーザーが行をクリックしたときに、次の表内の要素のインデックスを取得したいとします。

<table class="table table-hover" id="event_table"> 
    <thead> 
     <tr> 
     <th>Event Title</th> 
     <th>Event Location</th> 
     <th>Event Time</th> 
     <th>Event Date</th> 
     </tr> 
    </thead> 
    <tbody> 

     <tr> 
      <td>Gathering</td> 
      <td>City Centre</td> 
      <td>10:30</td> 
      <td>10/09/2016</td> 
     </tr> 
     <tr> 
      <td>Meetup</td> 
      <td>Some place</td> 
      <td>12:30</td> 
      <td>15/09/2016</td> 
     </tr> 


    </tbody> 
    </table> 

どうすればjQueryでこれを行うことができますか？あなたのコードは正常に動作します

$("#event_table tbody tr").on("click", function() { 
    $(this).index(); 
}); 

Answer 1

：

$("#event_table").on("click", "tbody tr", function() { 
 
    alert($(this).index()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <table class="table table-hover" id="event_table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Event Title</th> 
 
     <th>Event Location</th> 
 
     <th>Event Time</th> 
 
     <th>Event Date</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>Gathering</td> 
 
      <td>City Centre</td> 
 
      <td>10:30</td> 
 
      <td>10/09/2016</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Meetup</td> 
 
      <td>Some place</td> 
 
      <td>12:30</td> 
 
      <td>15/09/2016</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>