How to swap position of tr with jquery

I am not able to access to the server side to change codes.

I have the following output. The second tr shows tax and the third one is the sum.

Now I want to swap them. Showing the sum first and then tax with jquery.

The value of tax and sum will be different each time.

But tax will always have a text of 'Hvorav mva. utgjør' and Sum will have the text of Sum, but the first tr has Sum as well.

Thanks in advance.

    <TR>
    <TD CLASS="td-menu" COLSPAN="7">Sum</TD>
    </TR>
    <TR>
    <TD CLASS="td-main" COLSPAN="4" ALIGN="right">         
       开发者_如何学编程   Hvorav mva. utgjør:
    </TD>
    <TD CLASS="td-main" ALIGN="right">551,20</TD>
    <TD CLASS="td-main" ALIGN="right">  </TD>
    </TR>

    <TR>
    <TD CLASS="td-main" COLSPAN="3"> &nbsp; </TD>
    <TD CLASS="td-main" ALIGN="right"> Sum : </TD>
    <TD CLASS="td-main" ALIGN="right">            
      <FONT CLASS="font-pris-uextra">2 756,00</FONT>
    </TD>
    <TD CLASS="td-main" ALIGN="right">
    </TD>
    </TR>

    <TR>
    <TD CLASS="tdmain-em" COLSPAN="7"> <BR> </TD>
   </TR>

a quick one(sure there are better ways to do it here is an example in jsbin

and the code:

$(document).ready(function(){
   var tax = $("td:contains('Hvorav mva. utgjør')").parent();
   var sum = $("td:contains('Sum')").parent();
   tax.insertAfter(sum);
   tax.remove();
});​

[edit]
Missed the first TD containing the Sum... so it worked but not as expected(the tax was inserted as the second row right after it and not after the Sum that we intended)

so here is a better solution using the .td-main class on the items(the first row has the .td-menu class instead)

the code:

$(document).ready(function(){
    var tax = $("td.td-main:contains('Hvorav mva. utgjør')").parent();
    var sum = $("td.td-main:contains('Sum')").parent();
    tax.remove().insertAfter(sum);
});​