On the Code
<!doctype html> Sort function SortTable (table,idx) {var otable=document.getelementbyid (table), Otody=otable.tbodies[0], Otr=otody.rows, tarr=[]; for (var i = 1; I <otr.length; i++) {tarr[i-1]=otr[i]; }; Console.log (Tarr); if (OTODY.SORTCOL==IDX) {tarr.reverse (); }else{Tarr.sort (function (tr1,tr2) {var value1 = tr1.cells[idx].innerhtml; var value2 = tr2.cells[idx].innerhtml; if (!isnan (value1) &&!isnan (value2)) {return value1-value2; }else{return Value1.localecompare (value2); }})} var fragment = Document.createdocumentfragment (); for (var i = 0; I <tarr.length; i++) {fragment.appendchild (tarr[i]); }; Otody.appendchild (fragment); Otody.sortcol=idx; }//Drag function Drag (table) {var Ochek=document.getelementbyid ("Chenkbox"), Otable=document.getelementbyid (tab Le), OTODy=otable.tbodies[0], oth=otody.getelementsbytagname ("th"), Otd=otody.getelementsbytagname ("TD"), Box =document.getelementbyid ("box"), arrn=[]; for (var i = 0; i < otd.length; i++) {otd[i].onmousedown=function (e) {var e=e| | window.event, target = e.target| | E.srcelement, ThW = Target.offsetwidth, maxl=ochek.offsetwidth-thw, row S=otable.rows, Ckl=ochek.offsetleft, Disx=target.offsetleft, _this=this , CDISX=E.CLIENTX-CKL-DISX; for (var i = 0; i < rows.length; i++) {var op=document.createelement ("P"); op.innerhtml=rows[i].cells[this.cellindex].innerhtml; Box.appendchild (OP); }; for (var i = 0; i < oth.length; i++) {Arrn.push (oth[i].offsetleft); }; Console.log (ARRN); box.style.display= "Block"; box.style.width=thw+ "px"; box.style.left=disx+ "px"; Unfinished and there are no events written. Document.onmousemove=function (e) {var e=e| | window.event, target = e.target| | E.srcelement, ThW = target.offsetwidth; Box.style.top=0; box.style.left=e.clientx-ckl-cdisx+ "px"; if (BOX.OFFSETLEFT>MAXL) {box.style.left=maxl+ "px"; }else if (box.offsetleft<0) {box.style.left=0; } Document.onselectstart = function () {return false}; } document.onmouseup=function (e) {var e=e| | Window.event, Opr=box.getelementsbytagname ("P"), OBOXL=BOX.OFFSETLEFT+CDISX; for (var i = 0; i < arrn.length; i++) {if (ARRN[I]<OBOXL) {var Index=i; } }; for (var i = 0; i < rows.length; i++) {rows[i].cells[_this.cellindex].innerhtml= ""; rows[i].cells[_this.cellindex].innerhtml=rows[i].cells[index].innerhtml; Rows[i].cells[index].innerhtml= ""; rows[i].cells[index].innerhtml=opr[i].innerhtml; Console.log (rows[i].cells[index].innerhtml); }; Box.innerhtml= ""; Arrn.splice (0,arrn.length); Box.style.display= "None"; Document.onmousemove=null; Document.onmouseup=null; document.onselectstart=function () {return false}; } } }; } Drag ("Tablesort");</script></body>
Here I only do column sort or row sort will be done in a short time.Demo Address: Http://runjs.cn/detail/fxvbffhz
Share the table drag and replace content and sort the effect (Daniel do not spray)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
