HTML中的table里面的元素排序

当前位置 : 首页 > 网页制作 > html5 > HTML中的table里面的元素排序

HTML中的table里面的元素排序

来源: 作者: 时间:2016-01-14 17:05
我们在上网中都能看到很多能够排序的,如大小,时间等现在我们也试一下排序功能:排序的函数代码:里面含有点击之后排序--还原,和排升序和降序function sortAge(){ 对年龄进行排序,

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

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

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

 

	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;x
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 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();//排序之后还要对颜色重新设置
				
		}
   	</script>
姓名 出生地
张三 13 湖南长沙
李四 15 湖南常德
jack 45 湖南临澧
王华 23 浙江杭州
张进 30 安微合肥
周全 23 湖南益阳
杨哥 42 湖南常德

 

 

 

Tag:
网友评论

<