HTML中的table里面的元素排序

我们在上网中都能看到很多能够排序的，如大小，时间等

现在我们也试一下排序功能：

排序的函数代码：里面含有点击之后排序--还原，和排升序和降序

 

	function sortage(){
			//对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序
			var tabnode = document.getelementbyid(tabid);
			var rows0 = tabnode.rows;
			var rows1 = [];
			//现将元素拷贝一份出来， 第一行不用排序
			for (var x = 1; x < rows0.length; x++) {
				rows1[x - 1] = rows0[x];
			}
			for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象
				for (var y = x + 1; y < rows1.length; y++) {
					//对每一行的内容进行解析成数字
					if (parseint(rows1[x].cells[1].innerhtml) > parseint(rows1[y].cells[1].innerhtml)) {
						//alert(aa=+x+:+rows1[x].cells[1].innerhtml);
						//alert(bb+rows1[y].cells[1].innerhtml);
						var temp = rows1[x];
						rows1[x] = rows1[y];
						rows1[y] = temp;
					}
				}
			}
			
			/* 点击之后排序，排序之后恢复之前的状态

if (flag){
			
			for (var x = 0; x < rows1.length; x++) {
				//				tabnode.childnodes[0].appendchild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentnode.appendchild(rows1[x]);
			}
		}else{
			
			for (var x = 1; x < rows0.length; x++) {
				//				tabnode.childnodes[0].appendchild(rows[x]);//方法一： 不一定兼容
				rows0[x].parentnode.appendchild(rows0[x]);
			}
		}
		flag=!flag;*/
		/* 下面的是点之后出现正序和逆序显示  正序和逆序的区别就是appendchild的前后关系而已*/
		var ageimg=document.getelementbyid(ageid);
		
		if (flag) {
			for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始
				//				tabnode.childnodes[0].appendchild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentnode.appendchild(rows1[x]);
			}
			ageimg.innerhtml=年龄▲;//设置上面的图标
			
		}else{
			for (var x = rows1.length-1; x >=0; x--) {
				//				tabnode.childnodes[0].appendchild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentnode.appendchild(rows1[x]);
			}
			ageimg.innerhtml=年龄▼
		}
		flag=!flag;
			loading();//排序之后还要对颜色重新设置
				
		}

设置表格的背景颜色代码《导入的css》：

 

 

function loading(){
				var name;
				var tabnode=document.getelementbyid(tabid);
				var rows=tabnode.rows;//获得每一行的数组对象
				var rowslength=rows.length;//每一行的长度
				for(var x=1;xseout="function(){" .onmouseover="function(){" 2="=0){" name="this.classname;" onload="function(){" pre="" this.classname="three;">
css代码：
 
 
	table td a:hover{
   			background-color:#0080c0;
   		}
		.one{
			background-color:#80ff00;
		}
		.two{
			background-color:#ff8040;
		}
		.three{
			background-color:#008040;
		}
		table{
			width:500px;
			height:500px;
			border:#400040 solid 2px;
			border-collapse:collapse;
		}
		table td,th{
			border:solid 2px;
		}
		table th{
			background-color:#c0c0c0;
		}
效果图 排序之前：
 

升序：

降序：

完整代码：
 


<script type=text/javascript>
   		
   			function loading(){
				var name;
				var tabnode=document.getelementbyid(tabid);
				var rows=tabnode.rows;//获得每一行的数组对象
				var rowslength=rows.length;//每一行的长度
				for(var x=1;x;x++){> parseint(rows1[y].cells[1].innerhtml)) {
						//alert(aa=+x+:+rows1[x].cells[1].innerhtml);
						//alert(bb+rows1[y].cells[1].innerhtml);
						var temp = rows1[x];
						rows1[x] = rows1[y];
						rows1[y] = temp;
					}
				}
			}
			
			/* 点击之后排序，排序之后恢复之前的状态

if (flag){
			
			for (var x = 0; x =0; x--) {
				//				tabnode.childnodes[0].appendchild(rows[x]);//方法一： 不一定兼容
				rows1[x].parentnode.appendchild(rows1[x]);
			}
			ageimg.innerhtml=年龄▼
		}
		flag=!flag;
			loading();//排序之后还要对颜色重新设置
				
		}
   	</script>

姓名	年龄	出生地
张三	13	湖南长沙
李四	15	湖南常德
jack	45	湖南临澧
王华	23	浙江杭州
张进	30	安微合肥
周全	23	湖南益阳
杨哥	42	湖南常德

 

 

 

;x++){>