jQuery Greasemonkey Sorting images by name class

Question

Here is code from HTML. I would like to sort everything by class or src. I've been searching for answers a very long time and seems like i wont find that answer i need. Halp?

<table border="0" cellpadding="0" cellspacing="0" width="500">
<tbody>
<tr>
<td>
<img src="/images/gold.gif" class="a1">
<img src="/images/silver.gif" class="a2">
<img src="/images/copper.gif" class="a3">
<img src="/images/gold.gif" class="a1">
<img src="/images/silver.gif" class="a2">
<img src="/images/copper.gif" class="a3">
<img src="/images/gold.gif" class="a1">
<img src="/images/silver.gif" class="a2">
<img src="/images/copper.gif" class="a3">
</td>
</tr>
</tbody>
</table>

How do i sort those images so it would look something like this...

<img src="/images/gold.gif" class="a1">
<img src="/images/gold.gif" class="a1">
<img src="/images/gold.gif" class="a1">
<img src="/images/silver.gif" class="a2">
<img src="/images/silver.gif" class="a2">
<img src="/images/silver.gif" class="a2">
<img src="/images/copper.gif" class="a3">
<img src="/images/copper.gif" class="a3">
<img src="/images/copper.gif" class="a3">