<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>table order</title>
<script type="text/javascript">
function _order(_index,orderType){//param1:列标;param2:升序或降序排列
var tabDiv = document.getElementById("tabDiv");
var trs = tabDiv.getElementsByTagName("tr");
var ot = "asc";
if(orderType == "asc"){
ot = "desc";
}
//从新设置点击th列头的click事件
trs[0].getElementsByTagName("th")[parseInt(_index)]
.setAttribute("onclick","_order('"+_index+"','"+ot+"')");
//存取被排序列所有列值 ,元素格式 obj ={tr索引,列值}
//列值用来排序,tr索引用来排序后找到对应tr
var vals = [];
for(var i=1;i<trs.length;i++){
var tds = trs[i].getElementsByTagName("td");
for(var j=0;j<tds.length;j++){
if(j==_index){//只获取索引于被点击th索引相同的td,即同一列
//获取对应元素
var obj = {"trIndex":i,"tdVal":tds[j].innerHTML};
vals.push(obj);
}
}
}
//判断排序方式
if(orderType=="asc"){
vals = array_order_asc(vals);
}else{
vals = array_order_desc(vals);
}
//排序后,重绘table
var cont=trs[0].innerHTML;
for(var k=0;k<vals.length;k++){
cont +="<tr>"+trs[vals[k].trIndex].innerHTML+"</tr>";
}
var dv =document.getElementById("tabDiv");
dv.innerHTML = "<table border='1' >"+cont+"</table>";
}
//排序 冒泡,只按td中字符的char值比较,中文不考虑
//asc
function array_order_asc(arr){
for(var i=0;i<arr.length;i++){
for(var j = 0;j<arr.length-i-1;j++){
var size = arr[j].tdVal.length;
if(arr[j+1].tdVal.length<size){//比较次数按列值最短的
size = arr[j+1].tdVal.length;
}
for(var m = 0;m<size;m++){
var char1 = arr[j].tdVal.charAt(m);
var char2 = arr[j+1].tdVal.charAt(m);
if(char1==char2){//对应位置字符相等,继续比较下一位
continue;
}
if(char1>char2){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
break;
}
}
}
return arr;
}
//desc
function array_order_desc(arr){
for(var i=0;i<arr.length;i++){
for(var j = 0;j<arr.length-i-1;j++){
var size = arr[j].tdVal.length;
if(arr[j+1].tdVal.length<size){
size = arr[j+1].tdVal.length;
}
for(var m = 0;m<size;m++){
var char1 = arr[j].tdVal.charAt(m);
var char2 = arr[j+1].tdVal.charAt(m);
if(char1==char2){
continue;
}
if(char1<char2){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
break;
}
}
}
return arr;
}
</script>
</head>
<body>
<div id="tabDiv" >
<table border='1'>
<tr>
<th></th>
<th onclick="_order('1','asc')" style="cursor:hand">a</th>
<th onclick="_order('2','asc')" style="cursor:hand">b</th>
</tr>
<tr>
<td>1</td>
<td>shanghai</td>
<td>one</td>
</tr>
<tr>
<td>2</td>
<td>beijing</td>
<td>two</td>
</tr>
<tr>
<td>3</td>
<td>jinan</td>
<td>three</td>
</tr>
<tr>
<td>4</td>
<td>qingdao</td>
<td>four</td>
</tr>
<tr>
<td>5</td>
<td>guangzou</td>
<td>five</td>
</tr>
</table>
</div>
</body>
</html>
分享到:
相关推荐
大屏手写table轮播表(vue)
表格用法:$("#tableFixId).tableFixId({ tableParentDiv: $("#tableFixId"), //大容器 leftNum: 1, rightNum: 1, fixHead: "csFixed", footTable: 1, exparams: "input" })
javascript手写电子签名生成图片
asp.net 手写 table
原生js手写Promise
脚本简介js手写输入在线搜索是一款实用和常用的在线手写输入功能。
原生js结合jquery手写树形插件,详解编码思路,具体可使用示例,下载即可使用
计数排序
index.html是签名板直接显示的版本 dialog是签名板用对话框显示的版本
该插件用于PC端或移动端的手写签名功能主要应用在电子合同平台。
input 点击弹出带有小数点的数字软键盘。适合于微信、移动端,存js+css+html
本人手写的一款js树形控件,附带图片,代码简洁,注释齐全,可读性高,易于维护,方便移植,结构清晰,思路明了,界面美观,同时支持异步加载...试问,你拥有了自己的手写js树之后,你还会对jquery或ext的树感兴趣吗?
调用QQ输入API,在浏览器手写汉字,兼容IE、火狐、谷歌、360
最简单 最完整 亲自手写 无缝滑动动画js脚本
JavaScript手写发布订阅
1.不需要任何硬件支持。 2.全屏书写。 3.语音读字毛笔签名功能 4.简繁英数标点任意书写。
设计模式(简单工厂模式_排序)手写的代码,自己写博客用
ES5的bind手写实现
详细解释了快速排序的java实现.里面有代码,还有注释说明
javascript移动端手写签名,通过canvas绘制,base64图片