title: Get row index of table in jQuery
body: <p>I want to get the index of a  element within the following table when the user clicks on a row.</p>
  
  <pre><code>    &lt;table class="table table-hover" id="event_table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Event Title&lt;/th&gt;
          &lt;th&gt;Event Location&lt;/th&gt;
          &lt;th&gt;Event Time&lt;/th&gt;
          &lt;th&gt;Event Date&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
          &lt;tr&gt;
            &lt;td&gt;Gathering&lt;/td&gt;
            &lt;td&gt;City Centre&lt;/td&gt;
            &lt;td&gt;10:30&lt;/td&gt;
            &lt;td&gt;10/09/2016&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Meetup&lt;/td&gt;
            &lt;td&gt;Some place&lt;/td&gt;
            &lt;td&gt;12:30&lt;/td&gt;
            &lt;td&gt;15/09/2016&lt;/td&gt;
          &lt;/tr&gt;
  
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>How would I do this with jQuery?
  I have tried something similar to this:</p>
  
  <pre><code>$("#event_table tbody tr").on("click", function() {
     $(this).index(); 
  });
  </code></pre>