javascript-table Sorting (Descending/reverse order) implementation Introduction (photo) _javascript Tips

Knowledge Points:

Array method:

Sort: Descending

Reverse: Reverse Sequence

Effect:

Code:

Copy Code code as follows:

<style>
*{
margin:0;
padding:0;
}
#tableSort {
line-height:22px;
Background: #ccc;
}
#tableSort THEAD,
#tableSort tfoot{
Background: #066;
Color: #fff;
font-size:14px;
}
#tableSort Thead A,
#tableSort tfoot a{
Color: #fff;
}
#tableSort tfoot{
Background: #069;
}
#tableSort tbody td{
Background: #fff;
PADDING:3PX 5px;
font-size:12px;
}
</style>
<table width= "border=" 0 "cellspacing=" 1 "cellpadding=" 0 "id=" Tablesort ">
<thead>
<tr>
<th width= "to" align= "Center" > </th>
<th width= ">" Product name </th>
<th width= ">" Product Description </th>
<th width= "124" id= "Timesort" _isdesc= "false" > Shelf time </th>
<th width= "id=" Pricesort _isdesc= "false" > Price </th>
<th width= > Operation </th>
</tr>
</thead>
<tbody>
<tr>
&LT;TD align= "center" ><input type= "checkbox" Name= "Checkbox3" id= "CheckBox2" _op= "Check"/></td>
<td>1</td>
<td>12312312313</td>
<td>2013-5-8</td>
<td>￥120</td>
&LT;TD align= "center" ><a href= "javascript:void (0)" _op= "del" > Delete </a></td>
</tr>
<tr>
&LT;TD align= "center" ><input type= "checkbox" Name= "Checkbox4" id= "Checkbox3" _op= "Check"/></td>
<td>2</td>
<td> Ding Dai </td>
<td>2013-5-12</td>
<td>￥140</td>
&LT;TD align= "center" ><a href= "javascript:void (0)" _op= "del" > Delete </a></td>
</tr>
<tr>
&LT;TD align= "center" ><input type= "checkbox" Name= "Checkbox5" id= "checkbox4" _op= "Check"/></td>
<td>3</td>
<td> owes Workers </td>
<td>2013-4-8</td>
<td>￥320</td>
&LT;TD align= "center" ><a href= "javascript:void (0)" _op= "del" > Delete </a></td>
</tr>
<tr>
&LT;TD align= "center" ><input type= "checkbox" Name= "checkbox6" id= "checkbox5" _op= "Check"/></td>
<td>4</td>
<td> 77 </td>
<td>2013-8-8</td>
<td>￥520</td>
&LT;TD align= "center" ><a href= "javascript:void (0)" _op= "del" > Delete </a></td>
</tr>
<tr>
&LT;TD align= "center" ><input type= "checkbox" Name= "checkbox7" id= "checkbox6" _op= "Check"/></td>
<td>5</td>
<td> Harsh </td>
<td>2013-5-25</td>
<td>￥820</td>
&LT;TD align= "center" ><a href= "javascript:void (0)" _op= "del" > Delete </a></td>
</tr>
<tr>
&LT;TD align= "center" ><input type= "checkbox" Name= "checkbox8" id= "checkbox7" _op= "Check"/></td>
<td>6</td>
<td> Yellow Meiyu </td>
<td>2013-5-2</td>
<td>￥120</td>
&LT;TD align= "center" ><a href= "javascript:void (0)" _op= "del" > Delete </a></td>
</tr>
<tr>
&LT;TD align= "center" ><input type= "checkbox" Name= "checkbox9" id= "checkbox8" _op= "Check"/></td>
<td>7</td>
<td> Overalls </td>
<td>2013-5-18</td>
<td>￥1220</td>
&LT;TD align= "center" ><a href= "javascript:void (0)" _op= "del" > Delete </a></td>
</tr>
<tr>
&LT;TD align= "center" ><input type= "checkbox" Name= "checkbox10" id= "checkbox9" _op= "Check"/></td>
<td>8</td>
<td> the total of Alizarin </td>
<td>2013-3-8</td>
<td>￥1260</td>
&LT;TD align= "center" ><a href= "javascript:void (0)" _op= "del" > Delete </a></td>
</tr>
</tbody>
<tfoot>
<tr>
<th align= "center" ><input type= "checkbox" name= "checkbox" id= "Checkall"/></th>
<th align= "left" ><a href= "javascript:void (0)" id= "Reservecheck" > Anti-election </a> <a href= "javascript: void (0) "id=" Delselect > Delete </a></th>
<th align= "Left" > </th>
<th> </th>
<th> </th>
<th><a href= "#" ></a></th>
</tr>
</tfoot>
</table>
<script>
Batch Set checked value
function setchecked (checkboxs,checked) {
for (Var i=0,len=checkboxs.length;i<len;i++) {
checkboxs[i].checked=checked;
}
}
Bulk Reverse Checked value
function reversechecked (checkboxs) {
for (Var i=0,len=checkboxs.length;i<len;i++) {
checkboxs[i].checked=!checkboxs[i].checked;
}
}
Remove TR Value
function Removetr (TBODY,TR) {
Tbody.removechild (TR);
}
Get TR
function Getparenttr (o) {
while (o) {
O=o.parentnode;
if (o&&o.tagname=== "TR") {
return o;
}
}
}
Arrsort sort
function Arrsort (ARR,ISDESC) {
var arr=arr.sort (function (num1,num2) {
return num1-num2;
});
if (ISDESC) {//desc
Arr.reverse ();
}
return arr;
}
Table sort
function Tablesort (TABLEPART,COL,FUN,ISDESC) {
var arrnum=[],trs={};

for (Var i=0,len=tablepart.rows.length;i<len;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<jlen;j++) {
for (var k=0,klen=trs["id" +arrnum[j]].length;k<klen;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 target=ev.target| | 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<len;i++) {
if (checkboxs[i].checked) {
var tr=getparenttr (Checkboxs[i]);
Chk.push (TR);
}
}


for (Var j=0,jlen=chk.length;j<jlen;j++) {
REMOVETR (Table.tbodies[0],chk[j]);
}
}
var sortmark= "↑↓";
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= "Shelf 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= "Shelf Time";
This.innerhtml= "Price" +sortmark[this.isdesc?1:0];
}

</script>

Summary:

The basic functionality is complete and is not implemented for federated sorting. Later will slowly join, interested can put the code into the HTML page, run the viewing effect.