title: Sort Table Rows according to table data
body: <p>For example, I have a code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;name&lt;/td&gt;
          &lt;th&gt;price&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td class="sort"&gt;5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td class="sort"&gt;3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td class="sort"&gt;8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td class="sort"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td class="sort"&gt;2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;p&lt;/td&gt;
          &lt;td class="sort"&gt;6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td class="sort"&gt;20&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td class="sort"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want this to be sorted like this:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;name&lt;/td&gt;
          &lt;th&gt;price&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td class="sort"&gt;2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td class="sort"&gt;3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td class="sort"&gt;5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;p&lt;/td&gt;
          &lt;td class="sort"&gt;6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td class="sort"&gt;8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td class="sort"&gt;20&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td class="sort"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td class="sort"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I used this code:</p>
  
  <pre><code>function sortNum(a, b) {
      return 1 * $(a).find('.sort').text() &lt; 1 * $(b).find('.price').text() ? 0 : 1;
  }
  function sortTheTable(){
      $(function() {
          var elems = $.makeArray($('tr:has(.price)').remove())
          elems.sort(sortNum)
          $('table#information').append($(elems));
      });
  }
  </code></pre>
  
  <p>this works but, the problem is, the output is like this:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;name&lt;/td&gt;
          &lt;th&gt;price&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td class="sort"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td class="sort"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;h&lt;/td&gt;
          &lt;td class="sort"&gt;2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td class="sort"&gt;3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;a&lt;/td&gt;
          &lt;td class="sort"&gt;5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;p&lt;/td&gt;
          &lt;td class="sort"&gt;6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;c&lt;/td&gt;
          &lt;td class="sort"&gt;8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b&lt;/td&gt;
          &lt;td class="sort"&gt;20&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The empty one goes to top. I want the empty ones in the bottom.</p>
  
  <p>Thanks</p>