利用js排序html表格
来源：互联网 发布：软件著作权登记查询 编辑：程序博客网 时间：2024/06/06 06:42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js排序特效</title>
<style>
.main{ height:auto; overflow:hidden; margin:0px auto;}
.main td{ text-align:center; height:28px; width:100px; line-height:28px ; font-size:14px; color:#555;}
.main .title td{ cursor:pointer; color:#333}
.none{ display:none}
</style>
</head>
<body>
<table class="main" width="500" border="0" cellspacing="1" bgcolor="#666666">
<tr class="title">
<td bgcolor="#CCCCCC">姓名</td>
<td bgcolor="#CCCCCC">年龄</td>
<td bgcolor="#CCCCCC">出生年</td>
<td bgcolor="#CCCCCC">分数</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">李百（L）</td>
<td bgcolor="#FFFFFF">15</td>
<td bgcolor="#FFFFFF">1988</td>
<td bgcolor="#FFFFFF">99</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">王易(W)</td>
<td bgcolor="#FFFFFF">25</td>
<td bgcolor="#FFFFFF">2000</td>
<td bgcolor="#FFFFFF">150</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">林明(L)</td>
<td bgcolor="#FFFFFF">18</td>
<td bgcolor="#FFFFFF">1745</td>
<td bgcolor="#FFFFFF">120</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">李姐(L)</td>
<td bgcolor="#FFFFFF">20</td>
<td bgcolor="#FFFFFF">1996</td>
<td bgcolor="#FFFFFF">130</td>
</tr>
</table>
<div class="none"></div>
<script src="jquery.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){
var pk = 1;
$(".title td").click(function(e){
var currentTd = parseInt($(e.currentTarget).index());
var trLength = $("table tr").length;
var valueArray = [];
var p = 0;
for(var i = 1; i < trLength; i++){
valueArray[p] = currentTd != 0 ? parseInt($("table tr:eq(" + i + ") td").eq(currentTd).html()) : $("table tr:eq(" + i + ") td").eq(currentTd).html();
p++;
};
if(pk == 1){
pk = 2;
valueArray.sort(function(a, b){return a < b ? -1 : 1;});
}
else{
pk = 1;
valueArray.sort(function(a, b){return a > b ? -1 : 1;});
}
var valueLength = valueArray.length;
for(var i = 0; i < valueLength; i++){
for(var b = 1; b < trLength; b++){
var valueText = currentTd != 0 ? parseInt($("table tr:eq(" + b + ") td").eq(currentTd).html()) : $("table tr:eq(" + b + ") td").eq(currentTd).html();
if(valueText == valueArray[i]){
$("table tr").eq(b).clone().appendTo(".none");
}
};
};
var title = $("table tr:eq(0)").clone(true);
$("table").html("").append(title).append($(".none").html());
$(".none").html("");
});
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js排序特效</title>
<style>
.main{ height:auto; overflow:hidden; margin:0px auto;}
.main td{ text-align:center; height:28px; width:100px; line-height:28px ; font-size:14px; color:#555;}
.main .title td{ cursor:pointer; color:#333}
.none{ display:none}
</style>
</head>
<body>
<table class="main" width="500" border="0" cellspacing="1" bgcolor="#666666">
<tr class="title">
<td bgcolor="#CCCCCC">姓名</td>
<td bgcolor="#CCCCCC">年龄</td>
<td bgcolor="#CCCCCC">出生年</td>
<td bgcolor="#CCCCCC">分数</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">李百（L）</td>
<td bgcolor="#FFFFFF">15</td>
<td bgcolor="#FFFFFF">1988</td>
<td bgcolor="#FFFFFF">99</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">王易(W)</td>
<td bgcolor="#FFFFFF">25</td>
<td bgcolor="#FFFFFF">2000</td>
<td bgcolor="#FFFFFF">150</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">林明(L)</td>
<td bgcolor="#FFFFFF">18</td>
<td bgcolor="#FFFFFF">1745</td>
<td bgcolor="#FFFFFF">120</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">李姐(L)</td>
<td bgcolor="#FFFFFF">20</td>
<td bgcolor="#FFFFFF">1996</td>
<td bgcolor="#FFFFFF">130</td>
</tr>
</table>
<div class="none"></div>
<script src="jquery.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){
var pk = 1;
$(".title td").click(function(e){
var currentTd = parseInt($(e.currentTarget).index());
var trLength = $("table tr").length;
var valueArray = [];
var p = 0;
for(var i = 1; i < trLength; i++){
valueArray[p] = currentTd != 0 ? parseInt($("table tr:eq(" + i + ") td").eq(currentTd).html()) : $("table tr:eq(" + i + ") td").eq(currentTd).html();
p++;
};
if(pk == 1){
pk = 2;
valueArray.sort(function(a, b){return a < b ? -1 : 1;});
}
else{
pk = 1;
valueArray.sort(function(a, b){return a > b ? -1 : 1;});
}
var valueLength = valueArray.length;
for(var i = 0; i < valueLength; i++){
for(var b = 1; b < trLength; b++){
var valueText = currentTd != 0 ? parseInt($("table tr:eq(" + b + ") td").eq(currentTd).html()) : $("table tr:eq(" + b + ") td").eq(currentTd).html();
if(valueText == valueArray[i]){
$("table tr").eq(b).clone().appendTo(".none");
}
};
};
var title = $("table tr:eq(0)").clone(true);
$("table").html("").append(title).append($(".none").html());
$(".none").html("");
});
});
</script>
</body>
</html>
阅读全文
0 0
- 利用js排序html表格
- 利用原生JS实现表格正反排序
- 利用js将html表格导出为excel文件
- js操作html表格
- JS操作html表格
- html+css+js系列之二 html中的利用表格布局
- JS表格排序
- JS表格排序新法
- JS表格排序新法
- 表格动态排序js
- js表格字段排序
- js表格拖动排序
- JS表格排序
- js表格排序
- js表格排序
- js控制表格排序
- js 表格排序
- js表格字段排序
- http://blog.csdn.net/u013088062
- HTML基础
- 在 JS 中使用 fetch 更加高效地进行网络请求
- LRN
- springboot 启动初始化数据
- 利用js排序html表格
- Codeforces 260 Recordings
- poj-2689-大区间求素数
- 随笔记：使用Zxing 生成二维码
- char 和 unsigned 与int 之间的转换
- JDK版本新特性介绍&JDK1.7
- 机器人工具箱的安装
- IDEA下搜狗输入法输入中文时卡着不动的参考解决方法
- javascript中的break和continue用法
