html中表格着色与排序

最新推荐文章于 2021-04-01 23:11:03 发布

zzcchunter

最新推荐文章于 2021-04-01 23:11:03 发布

阅读量2.2k

点赞数

分类专栏： HTML CSS 文章标签： html function table border css 浏览器

本文链接：https://blog.csdn.net/zzcchunter/article/details/7294365

版权

HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

<!--
	本案例能对表格按行着色，当鼠标移动到某行会显示不同颜色，移出行后会恢复颜色
	用ie浏览器，本表格能够按分数排序
-->
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<style type="text/css">
	.on{
		background-color:#09F;
	}
	.off{
		background-color:#CCFF00;
	}
	th{
		background-color:#00FFFF;
	}
	.over{
		background-color:#FC3;
	}
</style>

<script type="text/javascript">

		var clsName;  //用于记录鼠标进入单元格时的颜色	
		window.οnlοad=cols;
		/**
			给单元格添加类名，以便CSS进行样式设置
			1、获取需要着色的table节点 Line37
			2、获取talbe节点总的行数 line38
			3、第一个为标题节点，所以从第2个节点开始遍历
			4、为奇偶数节点分别添加类名(line39 -- line 46)
			5、给每个节点添加onmouseover/onmouseout事件(line48 -- line 54)
		*/
		 function cols() {
			var tabNode = document.getElementsByTagName("table")[0];
			var rowNodes = tabNode.rows;
			for( var x=1; x<rowNodes.length; x++){
			  if(x % 2 == 0){
				  rowNodes[x].className ="on";
			  }
			  else
			  {
				  rowNodes[x].className = "off";
			  }
			  
			  rowNodes[x].onmouseover = function(){
				  clsName = this.className;
				  this.className= "over";
			}
			  rowNodes[x].onmouseout = function(){
				  this.className = clsName;
			  }				
			}
		}
		
		/**
		对节点中的分数进行排序(line68 -- line85)
		1、获取需要着色的table节点 Line69
		2、获取talbe节点总的行数 line70
		3、创建了一个新数组以便记录行节点信息line71
		4、遍历是数组记录节点信息 line73 -- line75
		5、将数组排序(冒泡算法) line88 -- line105
		6、将数组添加到tbody节点 line80 -- line 83
		7、调用cols方法重新设置表格css效果 line 84
		*/
	function getRows(){
		var tabNode = document.getElementsByTagName("table")[0];
		var rowNodes = tabNode.rows;
		var arr = new Array();
		
		for( var x=1; x<rowNodes.length; x++){
			  arr[x-1] = rowNodes[x];	  
			}
		sort(arr);
		
		var tbdNodes = tabNode.childNodes[0];
		
		for (var x=0; x<arr.length; x++){
			
			tbdNodes.appendChild(arr[x]);
		}
		cols();
	}
	//对单元格进行排序
	function sort(rows)
	{		
		for (var x=0; x<rows.length; x++)
		{
			for (var y =x+1 ; y<rows.length; y++)
			{
				var val1 = (rows[x].cells[1].innerText);
				var val2 =(rows[y].cells[1].innerText);
				if(  val1 > val2 )
				{					
					var temp = rows[y];
					rows[y]=rows[x];
					rows[x] =temp;		
				}
			}
		}
		//var tabNode=document.getElementsByTagName("table")[0];
	}
	
</script>
</HEAD>
<body>
<table border="3px" width="30%" cellPadding="6px" cellSpacing="0" borderColor="#0000e0">
	<tr>
		<th>姓名</th>
		<th onClick="getRows()">分数</th>
	</tr>
	<tr>
		<td>张山</td>
		<td>78</td>
	</tr>
	
	<tr>
		<td>李四</td>
		<td>92</td>
	</tr>

	<tr>
		<td>王五</td>
		<td>4</td>
	</tr>

	<tr>
		<td>赵六</td>
		<td>68</td>
	</tr>
    	<tr>
		<td>囧七</td>
		<td>1</td>
	</tr>
</table>

</center>
</BODY></HTML>

姓名	分数
张山	78
李四	92
王五	4
赵六	68
囧七	1

zzcchunter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中表格着色与排序

<!-- 本案例能对表格按行着色，当鼠标移动到某行会显示不同颜色，移出行后会恢复颜色用ie浏览器
复制链接

扫一扫