Code to write more cumbersome, many methods used very primitive ...
The code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title></title> <meta http-equiv = "Content-type" content= "text/html"; charset=gb2312 "/> <meta http-equiv=" content-language "content=" ZH-CN "/> <meta name=" Design Corp "content= "Li June"/> <meta name= "Designer Mail" content= "lijunabcxy@163.com"/> </pead> <style type= "Text/css" > <!--/*<!--[cdata[*/ul,li{margin:0;padding:0;list-style-type:none;} ul{width:450px;padding:10px;border:1px solid #ccc; background: #fafafa; line-height:25px; margin:10px;font-size:12px ;} #news_list li{border-bottom:1px dashed #cde;} #news_list Span{float:right;} #news_list Li A{color: #006;} /*]]>*/--></style> <script type= "Text/javascript" > function $ (s) {return document.all?document.all [s]:d Ocument.getelementbyid (s); } function List_sort(LIST_ID,BTN1,BTN2) {var list=$ (list_id). getElementsByTagName ("Li"); var c_date=$ (list_id). getElementsByTagName ("span"); var content=$ (list_id). getElementsByTagName ("a"); var date=new array (), Con=new array,date1=new Array (), con1=new array,list_con=new array; for (var i=0;i<list.length; i++)//the content to be compared is stored in the array {date1[i]=date[i]=c_date[i].innerhtml; list_con[i]=list[i].innerhtml; Con1[i]=con[i]=content[i].innerhtml.length; } con.sort (function (x,y) {return parseint (x)-parseint (y);}); /Sort character length date.sort (function sortdate (a,b) {return new date (A.replace (/-/, "/")-New Date (B.replace (/-/, "/")); );//To sort the dates. function Darry (arry1,arry2) {//Fetch array subscript functions. var b=new Array (); For (Var n=0;n<list.length. n++) {for (Var m=0;m<list.length;m++) {if (arry1[m]==arry2[n)) b[n]=m; } return B; } var top=0; $ (BTN1). Onclick=function () {insethtm (Con1,con)} $ (BTN2). Onclick=function () {insethtm (date1,date)} function insethtm (Ary1,ary2) {///sorted HTML output var c=darry (Ary1,ary2); var list_Html= ""; if (top==0) {for (Var k=0;k<list.length;k++) {list_html+= "<li>" +list_con[c[k]]+ "</li>"; Top=1}} else {for (Var k=list.length-1;k>=0;k--) {list_html+= "<li>" +list_con[c[k]]+ "</li>"; Top=0}} $ (list_id). innerhtml=list_html; } window.onload=function () {list_sort ("news_list", "Button1", "Button2")}//--></script> <body> &L T;ul id= "News_list" > <li> <span>2005-09-02</span> Web page Standard and standard guide download </li> <li> <SPAN&G T;2005-07-18</span> use the module to quickly start your </dl> </li> <li> <span>2005-01-29</span> Use the module to quickly arrange the order Ah, the news? </li> <li> <span>2005-02-15</span> seo Basics </li> <li> <SPAN&G T;2005-05-15</span> SEO Foundation and World outlook on life theory it's a long time. </li> </ul> <p><input type= "button" value= " Sort by character length "id=" button1 "/><input type=" button "value=" Sort by date "id=" Button2 "/></p> <p> simple description: </p > <ul><li> Calling Method: List_sort (LIST_ID,BTN1,BTN2) </li> <li>list_id--News listing ul id;</li> <li>btn1-- Sort events by Word id;</li> <li>btn2--id;</li> </ul> </body> </ptml> of events sorted by date
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The JS code is as follows:
Copy Code code as follows:
function $ (s) {
return Document.all?document.all[s]:d Ocument.getelementbyid (s);
}
function List_sort (LIST_ID,BTN1,BTN2) {
var list=$ (list_id). getElementsByTagName ("Li");
var c_date=$ (list_id). getElementsByTagName ("span");
var content=$ (list_id). getElementsByTagName ("a");
var date=new array (), Con=new array,date1=new Array (), con1=new array,list_con=new array;
for (var i=0;i<list.length; i++)//the content to be compared is stored in an array
{date1[i]=date[i]=c_date[i].innerhtml;
list_con[i]=list[i].innerhtml;
Con1[i]=con[i]=content[i].innerhtml.length;
}
Con.sort (function (x,y) {return parseint (x)-parseint (y);}); /Sort Character length
Date.sort (function sortdate (a,b)
{
return new Date (A.replace (/-/, "/"))-New Date (B.replace (/-/, "/"));
);//To sort the dates.
function Darry (arry1,arry2) {//Fetch array subscript functions.
var b=new Array ();
for (var n=0;n<list.length; n++)
{for (Var m=0;m<list.length;m++)
{if (arry1[m]==arry2[n]) b[n]=m;
}
}
return b;
}
var top=0;//defines the sort direction buoy
$ (BTN1). Onclick=function () {insethtm (Con1,con)}
$ (BTN2). Onclick=function () {insethtm (date1,date)}
function insethtm (ary1,ary2) {//sorted HTML output to UL
var c=darry (Ary1,ary2);//The Subscript of the array after getting the sort
var list_html= "";//define variables to store sorted HTML
if (top==0)
{for (Var k=0;k<list.length;k++)
{list_html+= "<li>" +list_con[c[k]]+ "</li>"; Top=1}
}
Else
{for (Var k=list.length-1;k>=0;k--)
{list_html+= "<li>" +list_con[c[k]]+ "</li>"; Top=0}
}
$ (list_id). innerhtml=list_html;
}
}
Window.onload=function () {
List_sort ("News_list", "Button1", "Button2")
}
