Last week , i had some troubles when I was trying to replace the html rows.The issue that I encountered is , whenever you switch rows using innerHTML property , controls loose their values/

So what I find out using googling , is to use the insertBefore function of the DOM

To achieve the function of replacing the upper or lower rows of the table ;

row = GetRowReferenceBySomeHow();

tbody = GetBodyReference();// or you can simple use row.parentNode 

isUp = true ; // whatever you choose(true is cool always , we dont like false(s)!

if(isUp) 

 tbody.insertBefore( row.previousSibling,row);

else

   tbody.insertBefore( row, row.nextSibling );

Viole! Cool huh ? Actually , nothing is cool , but since we are geek ( or at least I am (not always ) ) !