title: Sorting a table based on which header cell was clicked
body: <p>If I have the following:</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;&lt;a href="Index.cfm?Sort=0"&gt;First&lt;/a&gt;&lt;/th&gt;
  &lt;th&gt;&lt;a href="Index.cfm?Sort=1"&gt;Second&lt;/a&gt;&lt;/th&gt;
  &lt;th&gt;&lt;a href="Index.cfm?Sort=2"&gt;Third&lt;/a&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;A&lt;/td&gt;
  &lt;td class="num"&gt;123&lt;/td&gt;
  &lt;td&gt;&lt;input name="XYZ"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Q: How do I sort the table body based upon which table header cell was clicked?</p>
  
  <pre><code>&lt;script&gt;
  $('th a').click(function() {
      var $this = $(this).closest('th');
      console.log($this.index());
      return false;
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>(I made each of the table header cells hyperlinks so that if the user has JavaScript turned off, it will follow the link and be sorted on the server side).</p>