Sorting a table based on which header cell was clicked
<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>
