您的位置：首页 > Web前端 > JavaScript

javaScript菜鸟：学习js的Sort()排序的总结（参考大师示例）

2010-12-09 17:08 597 查看

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>無題のページ</title>
<script type="text/javascript">
var students=new Array();
students.push({name:"xiaowang",stuNo:"001",age:12,sex:"female"});
students.push({name:"caocao",stuNo:"334",age:23,sex:"male"});
students.push({name:"zhangbiao",stuNo:"333",age:55,sex:"female"});
students.push({name:"diaochan",stuNo:"1234",age:44,sex:"female"});
students.push({name:"shunquan",stuNo:"523",age:423,sex:"male"});
students.push({name:"zhuge",stuNo:"2334",age:53,sex:"male"});
students.push({name:"liubei",stuNo:"433",age:34,sex:"male"});
students.push({name:"xiangyu",stuNo:"678",age:45,sex:"man"});
students.push({name:"Smith",stuNo:"234",age:56,sex:"woman"});
students.push({name:"Jim",stuNo:"634",age:25,sex:"man"});

/×------------------------排序要用的方法，通过修改大于号和小于号的方向可以控制是降序排还是升序排-------------------------------------------------×/
function compare(pro){
return function(object1,object2){
var value1=object1[pro];
var value2=object2[pro];
if(value1>value2){
return 1;
}else if(value1<value2){
return -1;
}else{
return 0;
}
};
}
/×---------------------------------将数据显示在表格中------------------------------------------------×/
function stuInfoShow(){
window.document.getElementById("myDiv").innerHTML=null;
var studentShow=null;
studentShow="<table border='1' collspace='0'>";
studentShow+="<tr style='cursor:pointer;'>";

/×----------------------------------------------点击表格第一行的单元格，会按照单元格里的字段排序----------------------------------------------------×/
studentShow+="<th onclick='infoSort(this)'>name</th>";
studentShow+="<th onclick='infoSort(this)'>stuNo</th>";
studentShow+="<th onclick='infoSort(this)'>age</th>";
studentShow+="<th onclick='infoSort(this)'>sex</th>";
studentShow+="</tr>";

for(var i=0;i<students.length;i++)
{
studentShow+="<tr>";
studentShow+="<th>"+students[i].name+"</th>";
studentShow+="<th>"+students[i].stuNo+"</th>";
studentShow+="<th>"+students[i].age+"</th>";
studentShow+="<th>"+students[i].sex+"</th>";
studentShow+="</tr>";
}
studentShow+="</table>";

window.document.getElementById("myDiv").innerHTML=studentShow;
}
function infoSort(e){

students.sort(compare(e.innerText));
stuInfoShow();
}

window.onload=function(){
stuInfoShow();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="myDiv">

</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航