JavaScript 表格排序的写法和排序
🌙
手机阅读
本文目录结构
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格排序 - Powered By Broszhu</title>
<link rel="stylesheet" type="text/css" href="css/table.css"/>
<style>
#home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
#home_bottom {color:#008CD7;text-align:center;font-size:14px;}
</style>
</head>
<body>
<h2 id="home_top">表格排序 - Powered By <a href="https://github.com/Broszhu"target="_blank">broszhu</a> 博客网址：<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
<p id="home_bottom">学习JavaScript是一件很有趣的事，可以做出很多自豪的小玩意！--broszhu （这个页面是实现原理：<a href="http://taobao.fm/archives/967" target="_blank">点此查看</a>）</p>
<div id="div1">
<table id="tab" cellpadding="0" cellspacing="0" >
<thead>
<tr>
<th class="w30">
<input type="checkbox"/>
</th>
<th class="w70" id="name">姓名</th>
<th class="w100 cursor" id="age">年龄</th>
<th class="w100" id="mail">邮箱</th>
<th class="w200" id="phone">手机</th>
<th class="w200 cursor" id="score">工资</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript" src="js/jsonPerson.js"></script>
<!--json这个数据一定要在table.js前面，否则可能会出现报错undefined的情况-->
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/table.js"></script>
</body>
</html>
tools.js
var tools = {
formatJSON: function (jsonStr) {
var jsonObj = null;
try {
jsonObj = JSON.parse(jsonStr);
} catch (e) {
jsonObj = eval("(" + jsonStr + ")");
}
return jsonObj;
},
isType: function (val, type) {
return Object.prototype.toString.call(val) === "[object " + type + "]";
},
likeToArray: function (likeAry) {
var ary = [];
try {
ary = [].slice.call(likeAry, 0);
} catch (e) {
for (var i = 0; i < likeAry.length; i++) {
ary.push(likeAry[i]);
}
}
return ary;
}
};
table.js
var oTab=document.getElementById("tab");
var oBody=oTab.tBodies[0];
var oRows=oBody.rows;
var tables={
/*下面是一个封装函数，使表格变色的*/
changeColor:function () {
for (var i = 0; i < oRows.length; i++) {
var oRow = oRows[i];
i % 2 == 0 ? oRow.className = "c" : oRow.className="";
oRow.oldClass = oRow.className;
oRow.onmouseover = function () {
this.className = "cy";
};
oRow.onmouseout = function () {
this.className = this.oldClass;
}
}
},
/*下面是表格引入json的*/
show:function () {
var str = "";
if (jsonData && jsonData.length > 0) {
for (var i = 0; i < jsonData.length; i++) {
var cur = jsonData[i];
str += "<tr>";
str += "<td><input type='checkbox' name='tabInput'/></td>";
for (var key in cur) {
str += "<td>" + cur[key] + "</td>";
}
str += "</tr>";
}
}
oBody.innerHTML = str;
tables.changeColor();
},
};
tables.show();
tables.changeColor();
/*表格排序*/
function sortRows(n) {
var oRows = oBody.rows;
var oRowsAry = tools.likeToArray(oRows);
//给所有行对应的数组进行排序
oRowsAry.sort(function (a, b) {
var as = a.cells[n].innerHTML;
var bs = b.cells[n].innerHTML;
if(isNaN(as)){
return as.localeCompare(bs);
}else{
return as - bs;
}
});
//实现升降序处理
if (this.flag === "asc") {
oRowsAry.reverse();
this.flag = "desc";
} else {
this.flag = "asc";
}
//按照最新的顺序，把我们的每一行重新的添加到页面中
var frg = document.createDocumentFragment();
for (var i = 0; i < oRowsAry.length; i++) {
frg.appendChild(oRowsAry[i]);
}
oBody.appendChild(frg);
tables.changeColor();
}
/*oName.onclick = function () {
sortRows.call(this, 1);
*//* alert("这是一个彩蛋！你真幸运！发触发了这个秘密！可凭此页面截图，到附近黄金店免费领取300克的项链一条！领取方式：拿起就跑，越快越好。 领取后还可以赢得看守所七天食宿全包超值游， 还送精美炫酷手铐脚链一条，时尚囚衣套装，警车接送等， 领的越多惊喜越多， 前十名还可享受免费剃头, 前一百名还可与警犬嬉戏， 来宾均赠棍棒按摩，电击去死皮美容保健套装， 还等什么，赶快行动吧 ！");*//*
};
//tools.css-js.com 在线压缩代码；
//开始打算给每个innerHTML加onclick事件的，但是发现用循环来做，会更加的简单；下面是废弃代码
var oScore = document.getElementById("score");
var oAge = document.getElementById("age");
var oName=document.getElementById("name");
var oPhone=document.getElementById("phone");
var oMail=document.getElementById("mail");
*/
var oThs=document.getElementsByTagName("th");
for(var i=0;i<oThs.length;i++){
oThs[i].zhu = i;
oThs[i].onclick=function(){
sortRows.call(this,this.zhu);
}
}
//选中效果；
var oChk = document.getElementsByTagName("input")[0];
selectAll(0);
oChk.onclick = function () {
this.checked ? selectAll(1) : selectAll(0);
};
function selectAll(flag) {
var oChk = document.getElementsByTagName("input");
for (var i = 1; i < oChk.length; i++) {
oChk[i].onclick = function () {
!this.checked ? oChk[0].checked = "" : void 0;
var tmpFlag = true;
for(var i=1; i<oChk.length; i++){
if(!oChk[i].checked){
tmpFlag = false;
break;
}
}
if(tmpFlag){
oChk[0].checked = "checked";
}
};
flag === 0 ? oChk[i].checked = "" : oChk[i].checked = "checked";
}
}
jsonPerson
var jsonData = [
{
name: "朱安邦",
age: 25,
email: "1234567890@qq.com",
phone: "13245637823",
score: 1340
},
{
name: "刘安邦",
age: 23,
email: "4123456780@qq.com",
phone: "18723456423",
score: 1200
},
{
name: "李安邦",
age: 32,
email: "4123456890@qq.com",
phone: "13800026574",
score: 1800
},
{
name: "王安邦",
age: 41,
email: "5234567890@qq.com",
phone: "13800993302",
score: 1034
},
{
name: "甄安邦",
age: 40,
email: "2234567890@qq.com",
phone: "15802193302",
score: 1456
},
{
name: "爱安邦",
age: 34,
email: "2234567890@qq.com",
phone: "13411293302",
score: 2568
},
{
name: "殷安邦",
age: 23,
email: "1323467890@qq.com",
phone: "17723493302",
score: 1445
},
{
name: "康安邦",
age: 34,
email: "4723467890@qq.com",
phone: "13833493302",
score: 1740
},
{
name: "邓安邦",
age: 43,
email: "9123456890@qq.com",
phone: "15922493302",
score: 1890
},
{
name: "朱一名",
age: 25,
email: "9123456890@qq.com",
phone: "13846379824",
score: 1190
},
{
name: "朱二名",
age: 28,
email: "9123456890@qq.com",
phone: "15934493302",
score: 1290
},
{
name: "朱三名",
age: 28,
email: "9123456890@qq.com",
phone: "15956783302",
score: 1490
},
{
name: "朱四名",
age: 38,
email: "9123456890@qq.com",
phone: "15922496538",
score: 1990
},
{
name: "朱五名",
age: 48,
email: "9123456890@qq.com",
phone: "15922497890",
score: 1290
},
{
name: "朱六名",
age: 37,
email: "9123456890@qq.com",
phone: "15922434562",
score: 2890
},
{
name: "朱七名",
age: 25,
email: "9123456890@qq.com",
phone: "15922474529",
score: 3790
},
{
name: "朱八名",
age: 26,
email: "9123456890@qq.com",
phone: "15922499457",
score: 2390
},
{
name: "朱九名",
age: 34,
email: "9123456890@qq.com",
phone: "15922492536",
score: 1290
},
{
name: "朱十名",
age: 23,
email: "9123456890@qq.com",
phone: "15922492648",
score: 2890
},
];
table.css
html, body, div, input, table, tr, td, th{
margin:0;
padding: 0;
font-size: 12px;
font-family: "微软雅黑", "宋体";
}
ul,li,td,th{
list-style: none;}
#div1{
width: 700px;
margin: 50px auto 0;
padding: 5px;
border: 1px solid #008CD7;
border-radius: 5px;
}
thead tr,tbody tr{
height: 30px;
line-height: 30px;
text-align: center;
-webkit-user-select: none;
}
thead{
height: 30px;
background: #008CD7;
cursor: pointer;
}
.w30 { width: 30px;}
.w70{width: 70px;}
.w100{ width: 100px;}
.w200{ width: 200px;}
.c{background: #cccccc}
.cy{background: #CDE074}
