Introduction to the implementation of javascript-Table sorting (descending/reverse) (with diagram) _ javascript skills

The Array method, sort: descending order, reverse: reverse order are used to complete basic functions. This function is not implemented for Union sorting. If you are interested, refer Knowledge point:

Array method:

Sort: Descending

Reverse: reverse Order

Effect:

Code:

The Code is as follows:

	Product Name	Product Description	Mounting time	Price	Operation
	1	12312312313		￥120	Delete
	2	Ding Dai		￥140	Delete
	3	Owed		￥320	Delete
	4	7th		￥520	Delete
	5	Bytes		￥820	Delete
	6	Huang Meiyu	2013-5-2	￥120	Delete
	7	Overalls		￥1220	Delete
	8	Dixicommunist		￥1260	Delete
	Reselect and delete

Script
// Set the checked value in batches
Function setChecked (checkBoxs, checked ){
For (var I = 0, len = checkBoxs. length; I CheckBoxs [I]. checked = checked;
}
}
// Reverse checked values in batches
Function reverseChecked (checkBoxs ){
For (var I = 0, len = checkBoxs. length; I CheckBoxs [I]. checked =! CheckBoxs [I]. checked;
}
}
// Remove the tr Value
Function removeTr (tBody, tr ){
TBody. removeChild (tr );
}
// Obtain tr
Function getParentTr (o ){
While (o ){
O = o. parentNode;
If (o & o. tagName = "TR "){
Return o;
}
}
}
// ArrSort sorting
Function arrSort (arr, isDesc ){
Var arr = arr. sort (function (num1, num2 ){
Return num1-num2;
});
If (isDesc) {// desc
Arr. reverse ();
}
Return arr;
}
// Sort tables
Function tableSort (tablePart, col, fun, isDesc ){
Var arrNum = [], trs = {};

For (var I = 0, len = tablePart. rows. length; I Var td = tablePart. rows [I]. cells [col];
Var num = fun (td );
ArrNum. push (num );
Trs ["id" + num] = trs ["id" + num] | [];
Trs ["id" + num]. push (getParentTr (td ));
}
ArrNum = arrSort (arrNum, isDesc );
For (var j = 0, jlen = arrNum. length; j For (var k = 0, klen = trs ["id" + arrNum [j]. length; k Var tr = trs ["id" + arrNum [j]. pop ();
TablePart. appendChild (tr );
}
}
}


Var table = document. getElementById ("tableSort ");
Var checkBoxs = table. tBodies [0]. getElementsByTagName ('input ');
Var checkAll = document. getElementById ("checkAll ");
Var reserveCheck = document. getElementById ("reserveCheck ");
Var delSelect = document. getElementById ("delSelect ");
Var timeSort = document. getElementById ("timeSort ");
Var priceSort = document. getElementById ("priceSort ");

CheckAll. onclick = function (){
SetChecked (checkBoxs, this. checked );
}

ReserveCheck. onclick = function (){
ReverseChecked (checkBoxs );
}
Table. tBodies [0]. onclick = function (e ){
Var ev = e | window. event;
Var targetincluev.tar get | ev. srcElement;
If (! Target) return;
Target. _ op = target. getAttribute ("_ op ");
If (! Target. _ op) return;

If (target. _ op = "check" & target. type = "checkbox "&&! Target. checked ){
CheckAll. checked = target. checked;
}
If (target. _ op = "del "){
Var tr = getParentTr (target );
RemoveTr (table. tBodies [0], tr );
}
}
DelSelect. onclick = function (){
Var chk = [];
For (var I = 0, len = checkBoxs. length; I If (checkBoxs [I]. checked ){
Var tr = getParentTr (checkBoxs [I]);
Chk. push (tr );
}
}


For (var j = 0, jlen = chk. length; j RemoveTr (table. tBodies [0], chk [j]);
}
}
Var sortMark = "zookeeper ";
TimeSort. onclick = function (){
This. isDesc = (this. isDesc = true )? False: true;
TableSort (table. tBodies [0], 3, function (td ){
Return (new Date (td. innerHTML). getTime ();
}, This. isDesc );
PriceSort. innerHTML = "price"
This. innerHTML = "shelving time" + sortMark [this. isDesc? 1:0];
}
PriceSort. onclick = function (){
This. isDesc = (this. isDesc = true )? False: true;
TableSort (table. tBodies [0], 4, function (td ){
Return parseInt (td. innerHTML. replace ("￥ ",''));
}, This. isDesc );
TimeSort. innerHTML = "shelving time ";
This. innerHTML = "price" + sortMark [this. isDesc? 1:0];
}

Script

Summary:

The basic function is completed, and the Union sorting is not implemented. It will be added later. If you are interested, you can put the code on the html page and run it to view the effect.