ZF总结:0202 javascript的DOM成绩单表格排序

表格排序是常用的一个应用;

汉语的话需要用到localeCompare代替sort来比较;

var str1="",
str2="";
alert(str2.localeCompare(str1));//-1;判断汉字前后顺序的方法;

表格效果如下:

表格排序

~

代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}
table,td,tr,th{border-collapse: collapse;border: 1px solid orange;}
th{cursor: pointer;}
</style>
</head>
<body>
<table width="450" border="1" align="center">
<thead>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>34</td>
<td>23</td>
<td>84</td>
</tr>
<tr>
<td>李四</td>
<td>47</td>
<td>37</td>
<td>62</td>
</tr>
<tr>
<td>王五</td>
<td>63</td>
<td>35</td>
<td>48</td>
</tr>
<tr>
<td>李六</td>
<td>34</td>
<td>45</td>
<td>19</td>
</tr>
<tr>
<td>朱八</td>
<td>64</td>
<td>34</td>
<td>67</td>
</tr>
<tr>
<td>孙七</td>
<td>45</td>
<td>46</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
var oTable=document.getElementsByTagName("table")[0],
oThead=oTable.tHead,
oTbody=oTable.tBodies[0],
oRows=oTbody.rows;
var aRows=listToArray(oRows);
var oThs=oThead.getElementsByTagName("th");
for(var i=0;i<oThs.length;i++){
(function(i){
oThs[i].onclick= function () {
rowSort(i,this);
}
})(i)
};
//rows这个是行集合,cells是行对象中的列;
var flag=-1;
function rowSort(i,key){
//flag*=-1;
if(key.flag){
key.flag*=-1;
}else{
key.flag=1;//第一次,则把flag属性舒适化为1;这样可以确保每列点第一次都是升序排列;
}
aRows.sort(function(a,b){
if(parseInt(a.cells[i].innerHTML)){
return key.flag*(a.cells[i].innerHTML-b.cells[i].innerHTML);
}else{
return key.flag*(a.cells[i].innerHTML.localeCompare(b.cells[i].innerHTML));
}
});
for(var n=0;n<aRows.length;n++){//添加到oTbody
oTbody
.appendChild(aRows[n])
};
};
function listToArray(eles) {
if(!(typeof eles=="object"&&eles.length&&eles[eles.length-1])){
throw new Error("不能操作非法的类数组");
}
var ary=[];
try{
ary=[].slice.call(eles,0);
}catch (e){
for(var i= 0,len=eles.length;i<len;i++){
ary.push(this[i]);
}
}
return ary;
}
</script>

~~~~~~~~

未经允许不得转载:朱邦邦的WEB前端开发博客 » ZF总结:0202 javascript的DOM成绩单表格排序

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址