Get row index of table in jQuery
<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>