<!DOCTYPE HTML><HTMLLang= "en"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Cities</title></Head> <Body><TableID= "Tabletest"> <thead> <th>Id</th><th>Name</th> </thead> <tbody> <TR><TD>100</TD><TD>B</TD></TR> <TR><TD>400</TD><TD>D</TD></TR> <TR><TD>50</TD><TD>A</TD></TR> <TR><TD>200</TD><TD>C</TD></TR> </tbody></Table> <ButtonID= "BTN">Sort</Button><Script>window.onload= function() { varotable=document.getElementById ("tabletest"); varOtbody=otable.tbodies[0]; vararr=[]; varobtn=document.getElementById ("btn"); Flag=true; Obtn.onclick=function(){ for(varI=0; I<Otbody.rows.length;i++) {Arr.push (otbody.rows[i]); otbody.rows[i].cells[1]= +; } arr.sort (function(TR1,TR2) {if(flag) {returntr1.cells[0].innerhtml-tr2.cells[0].innerhtml; }Else{ returntr2.cells[0].innerhtml-tr1.cells[0].innerhtml; } }) varFragment=document.createdocumentfragment (); for(varI=0; I<Arr.length;i++) {otbody.appendchild (arr[i]); } otbody.appendchild (fragment); /*AppendChild has a property: if the inserted node already exists in the document tree of the current document, that node is first removed from its original location and then inserted into the new location.*/Flag=!Flag; } }</Script></Body> </HTML>
Implement a simple sort of form