javascript table 表格排序

在功能上实现了对表格不同内容的升序和降序的排序,内容可能是字符串,int类型,日期类型,float类型等。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>对单列表格进行排序</title>
<meta name="generator" content="Studio 3 http://aptana.com/">
<meta name="author" content="Administrator">
<script type="text/javascript" src="js/test3.js"></script>
</head>
<body>
<table border="1" id="tblsort">
<thead>
<tr>
<th onclick="table.sortTable('tblsort',0)" style="cursor: pointer">Last Name</th>
<th onclick="table.sortTable('tblsort',1)" style="cursor: pointer">First Name</th>
<th onclick="table.sortTable('tblsort',2,'int')" style="cursor: pointer">Age</th>
<th onclick="table.sortTable('tblsort',3,'date')" style="cursor: pointer">Birth Day</th>
<th onclick="table.sortTable('tblsort',4,'float')" style="cursor: pointer">Pay</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adam</td>
<td>Jack</td>
<td>26</td>
<td>1/12/1977</td>
<td>3000.12</td>
</tr>
<tr>
<td>Smith</td>
<td>Lucy</td>
<td>28</td>
<td>6/12/1975</td>
<td>4000.23</td>
</tr>
<tr>
<td>Johnson</td>
<td>Lily</td>
<td>35</td>
<td>07/12/1965</td>
<td>5000.03</td>
</tr>
<tr>
<td>Williams</td>
<td>Pual</td>
<td>25</td>
<td>12/08/1984</td>
<td>5000.56</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Jack</td>
<td>45</td>
<td>6/4/1953</td>
<td>10000</td>
</tr>
<tr>
<td>Bill</td>
<td>Hamson</td>
<td>36</td>
<td>9/8/1971</td>
<td>8000</td>
</tr>
<tr>
<td>Mowen</td>
<td>Alex</td>
<td>10</td>
<td>11/12/2000</td>
<td>6000</td>
</tr>
</tbody>
</table>
</body>
</html>



/**
* @author Administrator
*/
table = {
compareTRS : function (otr1, otr2) {
var value1 = otr1.cells[0].firstChild.nodeValue;
var value2 = otr2.cells[0].firstChild.nodeValue;
return value1.localeCompare(value2);
},
sortTable : function (tableId,col,datatype) {
var otable = document.getElementById(tableId);
var tbody = otable.tBodies[0];
var colDataRows = tbody.rows;
var trs = [];

for (var i=0; i < colDataRows.length; i++) {
trs.push(colDataRows[i]);
};

if (otable.sortCol == col) {
trs.reverse();
} else {
trs.sort(table.generateCompareTRS(col, datatype));
}

var fragment = document.createDocumentFragment();
for (var i=0; i < trs.length; i++) {
fragment.appendChild(trs[i]);
};
tbody.appendChild(fragment);
otable.sortCol = col;
},
generateCompareTRS : function (col, datatype) {
return function compareTRS (tr1, tr2) {
var value1 = table.convert(tr1.cells[col].firstChild.nodeValue, datatype);
var value2 = table.convert(tr2.cells[col].firstChild.nodeValue, datatype);
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
},
convert : function (value, datatype) {
switch(datatype) {
case "int":
return parseInt(value);
case "float":
return parseFloat(value);
case "date":
return new Date(Date.parse(value));
default:
return value.toString();
}
}
}



注意这个方法的使用,用到了javascript闭包的技术。

generateCompareTRS : function (col, datatype) {
return function compareTRS (tr1, tr2) {
var value1 = table.convert(tr1.cells[col].firstChild.nodeValue, datatype);
var value2 = table.convert(tr2.cells[col].firstChild.nodeValue, datatype);
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
}
展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值