根据列值以升序对表行进行排序

Question

我试图基于列值以升序对表行进行排序。我有这样的表结构

当我基于列方差值对表进行排序时，只有父行被移动而其余子行保留在其中。当我移动父行时，我想随之移动所有子行。

我尝试了

 <table id='test>
     <tr>
       <th>case</th>
       <th>variance</th> 
     </tr>
     <tr>
      <td><a id=' 2A214 ' class='tcID ' href='#/ '>2A214</a></td>
      <td>80</td>
     </tr>
     <tr id='2A214_detail '>
       <td>
                     <div>
            <table border=0 width=100% id='tblTopLevel '>
            <tbody>
            <tr class='risk '>
            <td>
            <table>
            <tbody>
             <tr class='riskTable '>
             <td  class='col1 '><a id='122824 ' class='riskID ' href='#/ '>1</a></td>
             <td  class='col2 '>test data</td>
             </tr>
              <tr id='122824_risk 'class='riskInfo '>
              <td>
              <div>
               <table border=0 width=100% id='tblriskLevel '>
              <tbody>
              <tr class='riskHeader '>
                <td>
                <table>
                <tbody>
               <tr class='risk '>
               <th>Name</th>   
               <th>Amt</th>
              </tr>
                <tr class='riskdata '>
                <td>RiskData1</td>
                <td>0</td>
               </tr>    
                </tbody>
                </table>
                </td>
              </tr>
              </tbody> 
               </table>
              </div>
              </td>
            </tr>
           </tbody>
           </table
           </td>
           </tr>
          </tbody>
         </table>
      </div>
   </td>
 </tr>

function sort()
    {
                    debugger;            
                 var td, tdd, table, rows,i, s, ss, detailrows;
                 var groups = [];
        s = true;

      table = document.getElementById("testCaseDetails");
      while(s)
      {
      s = false;

    rows = $('tr:not([class])',table);
    detailrows = $('tr.detailInfo',table);



    for (i = 1; i < rows.length - 1; i++) {
         rows = $('tr:not([class])',table);
        ss = false;
        td = rows[i].getElementsByTagName("td")[2];
                    tdd = rows[i+1].getElementsByTagName("td")[2];

                    if (Number(td.innerText) > Number(tdd.innerText)) {
            ss = true;
            break;
                                    }

      }
      if (ss) {

          rows[i].appendChild( rows[i].nextElementSibling);
          rows[i].parentNode.insertBefore(rows[i + 1].appendChild( 
    rows[i+1].nextElementSibling), rows[i]);    
          s = true;

                          }                              
                                      rows[i].style.backgroundColor = 
    "#f2f2f2";
                                      rows[i+1].style.backgroundColor = 
    "#f2f2f2";

                    }
      }