title: jQuery, sort table columns with colspan by clicking on the header
body: <p>I'd like to sort a table using jQuery. The table has rows with 4 columns and  rows (which are displayed upon clicking on the preceeding 4 column one) with 1 column. Is it possible to sort the table by values of the 4 column rows? So e. g. after clicking Header 2 the table will be reversed assuming 1st click does ascending sort.</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;&lt;th&gt;Header 1&lt;/th&gt;&lt;th&gt;Header 2&lt;/th&gt;&lt;th&gt;Header 3&lt;/th&gt;&lt;th&gt;Header 4&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;XYZ&lt;/td&gt;&lt;td&gt;456&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="inside"&gt;&lt;td colspan="4"&gt;Inside text&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;859&lt;/td&gt;&lt;td&gt;IOI&lt;/td&gt;&lt;td&gt;132&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="inside"&gt;&lt;td colspan="4"&gt;Inside text&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="inside"&gt;&lt;td colspan="4"&gt;Another inside text&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;798&lt;/td&gt;&lt;td&gt;GJOI&lt;/td&gt;&lt;td&gt;798&lt;/td&gt;&lt;td&gt;12&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="inside"&gt;&lt;td colspan="4"&gt;Inside text&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>