table列排序以及鼠标移动到行动态框显示行信息

Dear 丶 2023-03-13 02:19 2阅读 0赞

对于table的排序,有两种做法,一种是与后台交互,重新取数据,一种是直接在前端进行排序.至于选用两种方法,具体问题具体分析.根据自身面对的业务来选取

本文只演示了前端排序的方式,至于后端主要是sql语句问题.

思路:思路其实不复杂,简单来说,就是将所有的数据放到对应的数组(容器)中,然后对要进行排序的列进行排序(升序或降序),将排好的数组和原数组对比,如果值相等,取其它列对应数组中对应index的值,填到对应的行中.

这种排序,也可以使用现成的工具类,不过我是从网上找了一个手动实现的,直接拿来进行修改和使用,将原来的按数字排序,改成按汉字拼音顺序排序.从而,也添加了对特殊列值的单独排序以及下上箭头显示

本文的demo,除了排序外,还有鼠标移动到行,动态在鼠标下方显示行详情的功能.这个功能的代码基本上是从网上抄的现成代码,没有做多大改动.它的实现思路很简单,就是当鼠标移动到行上方时,获取到对应的行信息,以及鼠标的坐标轴,然后创建一个临时的div,在里面填入行的信息.然后再显示出来

<!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>自定义表格排序</title>
    		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    		<script type="text/javascript"> $(function(){ showDialog() }) var tag = 1; /** * 排序 */ //一般字符串按拼音排序 //按照汉语拼音来排序 function strComAsc(a, b) { return a.localeCompare(b); } //按照汉语拼音来排序 function strComDesc(a, b) { return b.localeCompare(a); } //会员按等级排序 function vipComAsc(a, b) { if(a == "普通会员") { //a是普通会员,b不管是什么会员,都是a在前 return 1; } if(b == "普通会员") { //a不是普通不会,b是普通会员,b在前 return -1; } if(a == "中级会员") { //a,b不是普通会员,a是中级会员,a在前 return 1; } if(b == "中级会员") { //ab不是普通会员,a不是中级会员,b是中级会员,b在前 return -1; } //a,b都不是普通会员,中级会员,那么a在前 return 1; } //按照汉语拼音来排序 function vipComDesc(a, b) { if(a == "普通会员") { //a是普通会员,b不管是什么会员,都是a在前 return -1; } if(b == "普通会员") { //a不是普通不会,b是普通会员,b在前 return 1; } if(a == "中级会员") { //a,b不是普通会员,a是中级会员,a在前 return -1; } if(b == "中级会员") { //ab不是普通会员,a不是中级会员,b是中级会员,b在前 return 1; } return 1; } var oldsp = ""; function SortTable(obj) { var td0s = document.getElementsByName("td0"); var td1s = document.getElementsByName("td1"); var td2s = document.getElementsByName("td2"); var td3s = document.getElementsByName("td3"); var td4s = document.getElementsByName("td4"); var td5s = document.getElementsByName("td5"); var tdArray0 = []; var tdArray1 = []; var tdArray2 = []; var tdArray3 = []; var tdArray4 = []; var tdArray5 = []; for(var i = 0; i < td0s.length; i++) { tdArray0.push(td0s[i].innerHTML); } for(var i = 0; i < td1s.length; i++) { tdArray1.push((td1s[i].innerHTML)); } for(var i = 0; i < td2s.length; i++) { tdArray2.push((td2s[i].innerHTML)); } for(var i = 0; i < td3s.length; i++) { tdArray3.push((td3s[i].innerHTML)); } for(var i = 0; i < td3s.length; i++) { tdArray4.push((td4s[i].innerHTML)); } for(var i = 0; i < td3s.length; i++) { tdArray5.push((td5s[i].innerHTML)); } var tds = document.getElementsByName("td" + obj.id.substr(2, 1)); var columnArray = []; for(var i = 0; i < tds.length; i++) { columnArray.push((tds[i].innerHTML)); } var orginArray = []; for(var i = 0; i < columnArray.length; i++) { orginArray.push(columnArray[i]); } var sps = $("#sp" + obj.id.substr(2, 1)); var spsT = sps.val(); if(spsT == "" || spsT == "↓") { if(obj.id == "th3") { columnArray.sort(vipComAsc); } else { columnArray.sort(strComAsc); //排序后的新值 } sps.html("↑"); sps.val("↑") // obj.className="desc"; } else { if(obj.id == "th3") { columnArray.sort(vipComDesc); } else { columnArray.sort(strComDesc); } //排序后的新值 // obj.className="as"; sps.html("↓"); sps.val("↓") } if(oldsp != "" && oldsp != "sp" + obj.id.substr(2, 1)) { $("#" + oldsp).val(""); $("#" + oldsp).html("") } oldsp = "sp" + obj.id.substr(2, 1); //将排好序的数据重写到table中 for(var i = 0; i < columnArray.length; i++) { for(var j = 0; j < orginArray.length; j++) { if(orginArray[j] == columnArray[i]) { document.getElementsByName("td0")[i].innerHTML = tdArray0[j]; document.getElementsByName("td1")[i].innerHTML = tdArray1[j]; document.getElementsByName("td2")[i].innerHTML = tdArray2[j]; document.getElementsByName("td3")[i].innerHTML = tdArray3[j]; document.getElementsByName("td4")[i].innerHTML = tdArray4[j]; document.getElementsByName("td5")[i].innerHTML = tdArray5[j]; orginArray[j] = null; break; } } } } /** * 动态展示数据 */ //当鼠标移动到某行时,显示改行的详细信息 /*var x = document.getElementById("myDialog"); function showDialog() { x.show(); } function closeDialog() { x.close(); }*/ function showDialog() { var data_table = document.getElementById("tableSort"); if(data_table == null) return; var trnodets = data_table.getElementsByTagName("tr"); for(var i = 1; i < trnodets.length; i++) { var trnode = trnodets[i]; trnode.onmousemove = function(ev) { this.style.backgroundColor = "#e0e0e0"; var div3 = document.getElementById("linshi"); var linenum = this.getElementsByTagName("td"); //获取所有子td标签 //alert(linenum); ev = ev || window.event; var mousePos = mouseCoords(ev); var div1 = document.createElement("div"); //创建一个td标签 div1.id = "linshi"; //为创建的td标签设置id div1.style.width = "250px"; div1.style.height = "100px"; div1.style.backgroundColor = "#fff"; div1.style.border = "1px solid #75878a"; div1.innerHTML = "会员ID:" + linenum[0].innerHTML + "<br />会员名:" + linenum[1].innerHTML + "<br />邮箱:" + linenum[2].innerHTML + "<br />会员组:" + linenum[3].innerHTML+"<br/>城市:"+linenum[4].innerHTML+"<br/>注册时间:"+linenum[5].innerHTML; div1.style.position = "absolute"; //绝对布局 //div1.style.left=mousePos.x+"px";//鼠标横位置 //div1.style.top=mousePos.y+25+"px"; div1.style.left = mousePos.x + "px"; //鼠标横位置 div1.style.top = mousePos.y + 25 + "px"; var body1 = document.getElementsByTagName("body"); if(div3 == null) { body1[0].appendChild(div1); //添加 } else { div3.parentNode.replaceChild(div1, div3); //替换 } } trnode.onmouseout = function() { this.style.backgroundColor = ""; var div3 = document.getElementById("linshi"); if(div3 != null) div3.parentNode.removeChild(div3); } } function mouseCoords(event) { /* if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; */ var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY; //alert('x: ' + x + '\ny: ' + y); return { 'x': x, 'y': y }; } } </script>
    		<style type="text/css"> * { padding: 0; margin: 0; } body { font-family: verdana; font-size: 12px; } .content { width: 550px; margin: 20px auto; } .content h1 { font-family: '微软雅黑'; font-size: 18px; padding-bottom: 5px; } table { width: 100%; } th, td { padding: 6px 0; text-align: center; } th { background-color: #007D28; color: #ffffff; } tr { background-color: #E8FFE8; } //设置偶数行颜色, /*table tbody tr:nth-child(even) { background-color: #8FBC8F; }*/ /*.odd { background-color: #FFF3EE; }*/ /*.highlight { background-color: #FFF3EE; }*/ //向上向下箭头,三角形 /*.ico_up { width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #B0B0B0; } .ico_down { width: 0; height: 0; border: 8px solid transparent; border-top-color: #B0B0B0; }*/ .spCla { display: inline-block; width: 8px } </style>
    	</head>
    
    	<body>
    		<table summary="user infomation table" id="tableSort">
    			<thead>
    				<tr>
    					<th id="th0" onclick="SortTable(this)" style="cursor: pointer;">会员ID<span id="sp0" class="spCla"></span></th>
    					<th id="th1" onclick="SortTable(this)" style="cursor: pointer;">会员名 <span id="sp1" class="spCla"></span></th>
    					<th id="th2" onclick="SortTable(this)" style="cursor: pointer;">邮箱<span id="sp2" class="spCla"></span></th>
    					<th id="th3" onclick="SortTable(this)" style="cursor: pointer;">会员组<span id="sp3" class="spCla"></span></th>
    					<th id="th4" onclick="SortTable(this)" style="cursor: pointer;">城市<span id="sp4" class="spCla"></span></th>
    					<th id="th5" onclick="SortTable(this)" style="cursor: pointer;">注册时间<span id="sp5" class="spCla"></span></th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td name="td0">126</td>
    					<td name="td1">webw3c</td>
    					<td name="td2" este@126.com</td>
    						<td name="td3">普通会员</td>
    						<td name="td4">北京</td>
    						<td name="td5">2011-04-13</td>
    				</tr>
    				<tr>
    					<td name="td0">145</td>
    					<td name="td1">test001</td>
    					<td name="td2">test001@126.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">合肥</td>
    					<td name="td5">2011-03-27</td>
    				</tr>
    				<tr>
    					<td name="td0">116</td>
    					<td name="td1">wuliao</td>
    					<td name="td2">wuliao@126.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">南昌</td>
    					<td name="td5">2011-04-01</td>
    				</tr>
    				<tr>
    					<td name="td0">129</td>
    					<td name="td1">tired</td>
    					<td name="td2">tired@126.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-04-06</td>
    				</tr>
    				<tr>
    					<td name="td0">155</td>
    					<td name="td1">tiredso</td>
    					<td name="td2">tireds0@126.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">武汉</td>
    					<td name="td5">2011-04-06</td>
    				</tr>
    				<tr>
    					<td name="td0">131</td>
    					<td name="td1">javascript</td>
    					<td name="td2">js2011@126.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">武汉</td>
    					<td name="td5">2011-04-08</td>
    				</tr>
    				<tr>
    					<td name="td0">132</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@126.com</td>
    					<td name="td3">高级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">231</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@231.com</td>
    					<td name="td3">高级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-05-12</td>
    				</tr>
    				<tr>
    					<td name="td0">235</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@235.com</td>
    					<td name="td3">高级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">236</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@236.com</td>
    					<td name="td3">高级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">321</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@321.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">天津</td>
    					<td name="td5">2012-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">322</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@322.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">天津</td>
    					<td name="td5">2012-04-16</td>
    				</tr>
    				<tr>
    					<td name="td0">323</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@323.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">天津</td>
    					<td name="td5">2012-04-18</td>
    				</tr>
    				<tr>
    					<td name="td0">421</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@421.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">421</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@421.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">422</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@422.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">423</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@423.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">424</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@424.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    
    </html>

table列数不固定

<!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>自定义表格排序</title>
    		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    		<script type="text/javascript">
    			$(function() { 
    				showDialog()
    			})
    			var tag = 1;
    
    			/**
    			 * 排序
    			 */
    			//一般字符串按拼音排序
    			//按照汉语拼音来排序
    			function strComAsc(a, b) { 
    
    				return a.localeCompare(b);
    			}
    			//按照汉语拼音来排序
    			function strComDesc(a, b) { 
    
    				return b.localeCompare(a);
    			}
    
    			//会员按等级排序
    			function vipComAsc(a, b) { 
    				if(a == "普通会员") { 
    					//a是普通会员,b不管是什么会员,都是a在前
    					return 1;
    				}
    				if(b == "普通会员") { 
    					//a不是普通不会,b是普通会员,b在前
    					return -1;
    				}
    				if(a == "中级会员") { 
    					//a,b不是普通会员,a是中级会员,a在前
    					return 1;
    				}
    				if(b == "中级会员") { 
    					//ab不是普通会员,a不是中级会员,b是中级会员,b在前
    					return -1;
    				}
    				//a,b都不是普通会员,中级会员,那么a在前
    				return 1;
    			}
    			//按照汉语拼音来排序
    			function vipComDesc(a, b) { 
    				if(a == "普通会员") { 
    					//a是普通会员,b不管是什么会员,都是a在前
    					return -1;
    				}
    				if(b == "普通会员") { 
    					//a不是普通不会,b是普通会员,b在前
    					return 1;
    				}
    				if(a == "中级会员") { 
    					//a,b不是普通会员,a是中级会员,a在前
    					return -1;
    				}
    				if(b == "中级会员") { 
    					//ab不是普通会员,a不是中级会员,b是中级会员,b在前
    					return 1;
    				}
    				return 1;
    			}
    
    			var oldsp = "";
    			var colNum = 6;
    
    			function SortTable(obj) { 
    				var tdArray = Array(); //列对象
    				var tdArrArray = Array(); //列数组对象
    				for(var i = 0; i < colNum; i++) { 
    					tdArray[i] = document.getElementsByName("td" + i);
    					tdArrArray[i] = [];
    					for(var j = 0; j< tdArray[i].length; j++) { 
    						tdArrArray[i].push(tdArray[i][j].innerHTML);
    					}
    				}
    			
    				var tds = document.getElementsByName("td" + obj.id.substr(2, 1));
    				var columnArray = [];
    				var orginArray = [];
    				for(var i = 0; i < tds.length; i++) { 
    					columnArray.push((tds[i].innerHTML));
    					orginArray.push((tds[i].innerHTML));
    				}
    
    				
    				var sps = $("#sp" + obj.id.substr(2, 1));
    				var spsT = sps.val();
    				if(spsT == "" || spsT == "↓") { 
    					if(obj.id == "th3") { 
    						columnArray.sort(vipComAsc);
    
    					} else { 
    						columnArray.sort(strComAsc); //排序后的新值
    					}
    					sps.html("↑");
    					sps.val("↑")
    					// obj.className="desc";
    				} else { 
    					if(obj.id == "th3") { 
    						columnArray.sort(vipComDesc);
    					} else { 
    						columnArray.sort(strComDesc);
    					}
    					//排序后的新值
    					//  obj.className="as";
    					sps.html("↓");
    					sps.val("↓")
    				}
    				if(oldsp != "" && oldsp != "sp" + obj.id.substr(2, 1)) { 
    					$("#" + oldsp).val("");
    					$("#" + oldsp).html("")
    				}
    				oldsp = "sp" + obj.id.substr(2, 1);
    				//将排好序的数据重写到table中
    				for(var i = 0; i < columnArray.length; i++) { 
    					for(var j = 0; j < orginArray.length; j++) { 
    						if(orginArray[j] == columnArray[i]) { 
    							for(var z = 0; z< colNum; z++) { 
    								tdArray[z] [i].innerHTML=tdArrArray[z][j];
    								
    							}
    							
    							orginArray[j] = null;
    							break;
    						}
    					}
    				}
    			}
    			/**
    			 * 动态展示数据
    			 */
    			//当鼠标移动到某行时,显示改行的详细信息
    			/*var x = document.getElementById("myDialog");
    
    			function showDialog() { 
    				x.show();
    			}
    
    			function closeDialog() { 
    				x.close();
    			}*/
    
    			function showDialog() { 
    				var data_table = document.getElementById("tableSort");
    				if(data_table == null) return;
    				var trnodets = data_table.getElementsByTagName("tr");
    				for(var i = 1; i < trnodets.length; i++) { 
    					var trnode = trnodets[i];
    					trnode.onmousemove = function(ev) { 
    						this.style.backgroundColor = "#e0e0e0";
    						var div3 = document.getElementById("linshi");
    						var linenum = this.getElementsByTagName("td"); //获取所有子td标签
    						//alert(linenum);
    						ev = ev || window.event;
    						var mousePos = mouseCoords(ev);
    						var div1 = document.createElement("div"); //创建一个td标签
    						div1.id = "linshi"; //为创建的td标签设置id
    						div1.style.width = "250px";
    						div1.style.height = "100px";
    						div1.style.backgroundColor = "#fff";
    						div1.style.border = "1px solid #75878a";
    
    						div1.innerHTML = "会员ID:" + linenum[0].innerHTML + "<br />会员名:" + linenum[1].innerHTML + "<br />邮箱:" + linenum[2].innerHTML + "<br />会员组:" + linenum[3].innerHTML + "<br/>城市:" + linenum[4].innerHTML + "<br/>注册时间:" + linenum[5].innerHTML;
    						div1.style.position = "absolute"; //绝对布局
    						//div1.style.left=mousePos.x+"px";//鼠标横位置
    						//div1.style.top=mousePos.y+25+"px";
    						div1.style.left = mousePos.x + "px"; //鼠标横位置
    						div1.style.top = mousePos.y + 25 + "px";
    						var body1 = document.getElementsByTagName("body");
    						if(div3 == null) { 
    							body1[0].appendChild(div1); //添加
    						} else { 
    							div3.parentNode.replaceChild(div1, div3); //替换
    						}
    					}
    					trnode.onmouseout = function() { 
    						this.style.backgroundColor = "";
    						var div3 = document.getElementById("linshi");
    						if(div3 != null)
    							div3.parentNode.removeChild(div3);
    					}
    
    				}
    
    				function mouseCoords(event) { 
    					/* if(ev.pageX || ev.pageY){ 
    					  return { x:ev.pageX, y:ev.pageY};
    					}
    					return { 
    					    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    					    y:ev.clientY + document.body.scrollTop     - document.body.clientTop
    					}; */
    					var e = event || window.event;
    					var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    					var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    					var x = e.pageX || e.clientX + scrollX;
    					var y = e.pageY || e.clientY + scrollY;
    					//alert('x: ' + x + '\ny: ' + y);
    					return { 
    						'x': x,
    						'y': y
    					};
    				}
    			}
    		</script>
    		<style type="text/css">
    			* { 
    				padding: 0;
    				margin: 0;
    			}
    			
    			body { 
    				font-family: verdana;
    				font-size: 12px;
    			}
    			
    			.content { 
    				width: 550px;
    				margin: 20px auto;
    			}
    			
    			.content h1 { 
    				font-family: '微软雅黑';
    				font-size: 18px;
    				padding-bottom: 5px;
    			}
    			
    			table { 
    				width: 100%;
    			}
    			
    			th,
    			td { 
    				padding: 6px 0;
    				text-align: center;
    			}
    			
    			th { 
    				background-color: #007D28;
    				color: #ffffff;
    			}
    			
    			tr { 
    				background-color: #E8FFE8;
    			}
    			
    			//设置偶数行颜色,
    			/*table tbody tr:nth-child(even) { 
    				background-color: #8FBC8F;
    			}*/
    			/*.odd { 
    				background-color: #FFF3EE;
    			}*/
    			/*.highlight { 
    				background-color: #FFF3EE;
    			}*/
    			
    			//向上向下箭头,三角形 
    			/*.ico_up { 
    				width: 0;
    				height: 0;
    				border: 8px solid transparent;
    				border-bottom-color: #B0B0B0;
    			}
    			
    			.ico_down { 
    				width: 0;
    				height: 0;
    				border: 8px solid transparent;
    				border-top-color: #B0B0B0;
    			}*/
    			
    			.spCla { 
    				display: inline-block;
    				width: 8px
    			}
    		</style>
    	</head>
    
    	<body>
    		<table summary="user infomation table" id="tableSort">
    			<thead>
    				<tr>
    					<th id="th0" onclick="SortTable(this)" style="cursor: pointer;">会员ID<span id="sp0" class="spCla"></span></th>
    					<th id="th1" onclick="SortTable(this)" style="cursor: pointer;">会员名 <span id="sp1" class="spCla"></span></th>
    					<th id="th2" onclick="SortTable(this)" style="cursor: pointer;">邮箱<span id="sp2" class="spCla"></span></th>
    					<th id="th3" onclick="SortTable(this)" style="cursor: pointer;">会员组<span id="sp3" class="spCla"></span></th>
    					<th id="th4" onclick="SortTable(this)" style="cursor: pointer;">城市<span id="sp4" class="spCla"></span></th>
    					<th id="th5" onclick="SortTable(this)" style="cursor: pointer;">注册时间<span id="sp5" class="spCla"></span></th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td name="td0">126</td>
    					<td name="td1">webw3c</td>
    					<td name="td2" este@126.com</td>
    						<td name="td3">普通会员</td>
    						<td name="td4">北京</td>
    						<td name="td5">2011-04-13</td>
    				</tr>
    				<tr>
    					<td name="td0">145</td>
    					<td name="td1">test001</td>
    					<td name="td2">test001@126.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">合肥</td>
    					<td name="td5">2011-03-27</td>
    				</tr>
    				<tr>
    					<td name="td0">116</td>
    					<td name="td1">wuliao</td>
    					<td name="td2">wuliao@126.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">南昌</td>
    					<td name="td5">2011-04-01</td>
    				</tr>
    				<tr>
    					<td name="td0">129</td>
    					<td name="td1">tired</td>
    					<td name="td2">tired@126.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-04-06</td>
    				</tr>
    				<tr>
    					<td name="td0">155</td>
    					<td name="td1">tiredso</td>
    					<td name="td2">tireds0@126.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">武汉</td>
    					<td name="td5">2011-04-06</td>
    				</tr>
    				<tr>
    					<td name="td0">131</td>
    					<td name="td1">javascript</td>
    					<td name="td2">js2011@126.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">武汉</td>
    					<td name="td5">2011-04-08</td>
    				</tr>
    				<tr>
    					<td name="td0">132</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@126.com</td>
    					<td name="td3">高级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">231</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@231.com</td>
    					<td name="td3">高级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-05-12</td>
    				</tr>
    				<tr>
    					<td name="td0">235</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@235.com</td>
    					<td name="td3">高级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">236</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@236.com</td>
    					<td name="td3">高级会员</td>
    					<td name="td4">北京</td>
    					<td name="td5">2011-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">321</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@321.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">天津</td>
    					<td name="td5">2012-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">322</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@322.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">天津</td>
    					<td name="td5">2012-04-16</td>
    				</tr>
    				<tr>
    					<td name="td0">323</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@323.com</td>
    					<td name="td3">中级会员</td>
    					<td name="td4">天津</td>
    					<td name="td5">2012-04-18</td>
    				</tr>
    				<tr>
    					<td name="td0">421</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@421.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">421</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@421.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">422</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@422.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">423</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@423.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    				<tr>
    					<td name="td0">424</td>
    					<td name="td1">jQuery</td>
    					<td name="td2">jQuery@424.com</td>
    					<td name="td3">普通会员</td>
    					<td name="td4">上海</td>
    					<td name="td5">2013-04-12</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    
    </html>