title: Sorting table rows according to table header column using javascript or jquery
body: <p>I have something like this</p>
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;S.L.&lt;/th&gt;
              &lt;th&gt;name&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Ronaldo&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;Messi&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;Ribery&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;Bale&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>What i want is to sort the <code>&lt;tr&gt;</code> of <code>&lt;tbody&gt;</code> when clicked <code>th</code> in ascending and descending order alternatively in according to the following <code>th</code> clicked.</p>
  <ol>
  <li>so if some one clicks the <code>S.L</code> <code>th</code> then it shows the table rows in
  descending and then ascending order alternatively at every click.</li>
  <li>When clicked <code>Name</code> <code>th</code> it should show the names in descending
  order and then ascending order without change in their respective
  <code>S.L</code></li>
  </ol>
  <p>here is <a href="http://jsfiddle.net/a2seK/" rel="nofollow noreferrer">fiddle </a></p>