Home > Developer > JavaScript
Web site development in general to use the table to display the data, often according to a column to sort the row, the following is a row I see from the book example, see after the benefit, so share out.
Complete the code directly:
<!doctype html>//sorts the rows in the first tbody based on the value of the nth cell in each row of a specified table//If there is a comparator function then use it, otherwise compare in alphabetical orderfunctionsortrows (table,n,comparator) {varTbody = Table.tbodies[0]; varrows = Tbody.getelementsbytagname ("tr"); Rows= Array.prototype.slice.call (rows,0);//convert to Real array //sort rows based on the values of nth <td> elementsRows.sort (function(row1,row2) {varCell1 = Row1.getelementsbytagname ("TD") [n]; varCell2 = Row2.getelementsbytagname ("TD") [n]; varVal1 = Cell1.textcontent | | Cell1.innertext;//IE compatible varVal2 = Cell2.textcontent | |Cell2.innertext; if(Comparator)returnComparator (VAL1,VAL2); if(VAL1<VAL2)return-1; Else if(VAL1>VAL2)return1; Else return0; }); for(vari=0;i<rows.length;i++) Tbody.appendchild (Rows[i]);//the original will be automatically removed}//find the <th> elements of the table (assuming only one row) so that they can be clicked so that the column is sorted by clicking on itfunctionmakesorttable (table) {varheaders = table.getelementsbytagname ("th"); for(vari=0;i){ (function(n) {//nested functions to create a local scope (this code does not quite understand itself, I tried to remove the nested function, but the result is wrong, I hope to understand this code of people also teach me)Headers[i].onclick =function() {sortrows (table,n);}; } (i)); }}window.onload=function(){ varTable = document.getElementById ("table"); Makesorttable (table); }</script><style type= "Text/css" >table{Table-Layout:auto; Border-Collapse:collapse;} th{border:solid 1px rgb (0,0,0); Cursor:pointer;} th:hover{background:red;} td{border:solid 1px rgb (0,0,0);}</style>JavaScript implements table row sorting
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
