title: How can I sort all table rows using the first table data value using jQuery?
body: <p>I have an JavaScript object defined as below :</p>
  
  <pre><code>&lt;tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); "&gt;
  &lt;td class="GridRow"&gt;Dorothy Allen&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Not Set&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Consultant&lt;/td&gt;
  &lt;td class="GridRow"&gt;Exceptional&lt;/td&gt;
  &lt;td class="GridRow"&gt;High&lt;/td&gt;
  &lt;td class="GridRow"&gt;DF855EC2-C04F-487A-85DE-9FBEFC0527BF&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); "&gt;
  &lt;td class="GridRow"&gt;Keith  Austin&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Not Set&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Senior Telesales&lt;/td&gt;
  &lt;td class="GridRow"&gt;Exceptional&lt;/td&gt;
  &lt;td class="GridRow"&gt;High&lt;/td&gt;
  &lt;td class="GridRow"&gt;3FDEE46E-EC02-448C-A709-E9284712B796&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); "&gt;
  &lt;td class="GridRow"&gt;​Margaret Fatania&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Not Set&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Consultant&lt;/td&gt;
  &lt;td class="GridRow"&gt;Exceptional&lt;/td&gt;
  &lt;td class="GridRow"&gt;High&lt;/td&gt;
  &lt;td class="GridRow"&gt;DF855EC2-C04F-487A-85DE-9FBEFC0527BF&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); "&gt;
  &lt;td class="GridRow"&gt;Ahmed Zia&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Not Set&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Senior Telesales&lt;/td&gt;
  &lt;td class="GridRow"&gt;Exceptional&lt;/td&gt;
  &lt;td class="GridRow"&gt;High&lt;/td&gt;
  &lt;td class="GridRow"&gt;3FDEE46E-EC02-448C-A709-E9284712B796&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); "&gt;
  &lt;td class="GridRow"&gt;Francis Becker&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Not Set&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Consultant&lt;/td&gt;
  &lt;td class="GridRow"&gt;Exceptional&lt;/td&gt;
  &lt;td class="GridRow"&gt;High&lt;/td&gt;
  &lt;td class="GridRow"&gt;DF855EC2-C04F-487A-85DE-9FBEFC0527BF&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr class="GridUnSelectedRow" grid_id="00000000-0000-0000-0000-000000000000" ondblclick="dblClick(); "&gt;
  &lt;td class="GridRow"&gt;Richard  Henry&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;3&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Not Set&lt;/td&gt;
  &lt;td class="GridRow"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td class="GridRow"&gt;Senior Telesales&lt;/td&gt;
  &lt;td class="GridRow"&gt;Exceptional&lt;/td&gt;
  &lt;td class="GridRow"&gt;High&lt;/td&gt;
  &lt;td class="GridRow"&gt;3FDEE46E-EC02-448C-A709-E9284712B796&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I need to be able to sort this object so that the TR rows appear sorted alphabetically ideally by surname then forename.</p>
  
  <p>I have seen plenty examples if the TR rows are inside a table and tbody elements using jQuery sort.</p>
  
  <p>However I'm not sure how to do this using the object above.</p>
  
  <p>The fullname is the first TD element of each row, e.g. 'Dorothy Allen'.</p>