Home > Developer > JavaScript
JavaScript implements a simple table sort effect, in this sake, practice table operations, mainly: tbodies, rows, cells, and the sorting method of the array: sort
Properties, methods for table elements in javascript:
1.caption: Holds pointers to <caption> elements (if any)
2.tBodies: is a < HTMLCOLLECTION&NBSP of the tbody> element;
3.tFoot: Holds the pointer to the <tfoot> element (if any)
4.tHead: Holds the <thead> The pointer to the element (if any)
5.rows: Is the htmlcollection of all rows in a table;
6.createTHead (): Creates a <thead> element, places it in a table, and returns a reference
7.createTFoot (): Create a <tfoot> element, place it in a table, and return a reference
8.createCaption (): Create <caption> element, Place it in the table and return the reference
9.deleteTHead (): delete <thead> element
10.deleteTFoot (): delete <tfoot> element
11.deleteCaption (): delete <caption> element
12.deleteRow (POS): Delete the specified location line
13.insertRow (POS) : Inserts a row to the specified position in the Rows collection,
about Tbody properties, methods:
1.rows: Holds htmlcollection for all rows tbody;
2.deleteRow (POS): Deletes the row at the specified location,
3.insertRow (POS): Inserts a row into the specified position in the Rows collection, and returns a reference to the newly inserted row
about the properties, methods: ,
1 of the TR. Cells: htmlcollection of all TD (cells) of TR;
2.deleteCell (POS): Delete cell at the specified location;
3.insetCell (POS) : Inserts a cell into a specified position in the Cells collection and returns a reference to the cell
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "GBK"><title> Contact Angle measuring instrument</title></Head><Body><TableID= "Tabletest"width= "The "Border= "1"><tbody><TR><TD>2</TD><TD>Bbb</TD><TD></TD><TD></TD></TR><TR><TD>5</TD><TD>Eee</TD><TD> </TD><TD></TD></TR><TR><TD>3</TD><TD>Ccc</TD><TD></TD><TD></TD></TR><TR><TD>4</TD><TD>Ddd</TD><TD></TD><TD></TD></TR><TR><TD>1</TD><TD>Aaa</TD><TD></TD><TD></TD></TR></tbody></Table><inputtype= "button"ID= "Sort"value= "table sort [veryhuo.com]" /><Script>window.onload= function () {varotable=document.getElementById ('tabletest');varOtbody=otable.tbodies[0];varobtn=document.getElementById ('Sort');vararr= [];//used to store each TRvarISASC= true;//to determine the ascending or descending orderObtn.onclick= function () { for (varI= 0; I<oTbody.rows.length; I++) {Arr[i]=Otbody.rows[i];//here is the basis for storing each TR into an array instead of the sort (here is cells[0].innerhtml)}//arrays are sorted according to cells[0].innerhtmlArr.sort (function(TD1, TD2) {if(ISASC) {returnparseint (td1.cells[0].innerhtml)-parseint (td2.cells[0].innerhtml);} Else {returnparseint (td2.cells[0].innerhtml)-parseint (td1.cells[0].innerhtml);});//Reinsert the ordered TR into the tbody for(varJ=0; J<Arr.length; J++) {otbody.appendchild (arr[j]);}//Judging Ascending, descendingISASC= !isasc;}}</Script></Body></HTML><Divstyle= "text-align:center;margin:30px 0 0 0;"><HRstyle= "color: #999; height:1px;">If the effect cannot be displayed, please press CTRL+F5 to refresh this page</Div>
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
