单元格排序+行颜色变化（DHTML）

wchb1990

于 2014-08-21 20:50:53 发布

阅读量435

点赞数

分类专栏： DHTML

本文链接：https://blog.csdn.net/wchb1990/article/details/38736519

版权

DHTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

单元格排序和行颜色间隔显示及高亮

<!DOCTYPE html>
<html>
<head>
<title>sortTab.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">
	/* 表格中按年龄顺序进行排序
	
	 1.每一个人的信息是一行。
	 那么先将行都取出，临时存入到数组中。
	 2.并对数组中的行对象的其中一个单元格的数据进行排序
	 3.将排序后的行对象重新添加回表格对象中。
	 */
	var b = true;
	function sorttab() {
		//1.获取表格中的所有行对象
		var tabNode = document.getElementsByTagName("table")[0];
		var trs = tabNode.rows;

		//2.定义临时容器，将表格中需要参与排序的行对象排序
		var arr = new Array();//临时容器里存入的都是表格行对象的引用
		for ( var x = 1; x < trs.length; x++) {

			arr[x - 1] = trs[x];
		}
		sort(arr);
		var tbdNode = tabNode.childNodes[1];
		//alert(tbdNode.nodeName);TBODY

		if (b) {
			for ( var x = 0; x < arr.length; x++) {
				//alert(arr[x].cells[1].innerText);
				tbdNode.appendChild(arr[x]);
			}
			b = false;
		} else {
			for ( var x = arr.length - 1; x >= 0; x--) {
				//alert(arr[x].cells[1].innerText);
				tbdNode.appendChild(arr[x]);
			}
			b = true;
		}
	}

	function sort(arr) {
		for ( var x = 0; x < arr.length; x++) {
			for ( var y = x + 1; y < arr.length; y++) {
				if (parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)) {
					var temp = arr[x];
					arr[x] = arr[y];
					arr[y] = temp;
				}
			}
		}

	}
</script>


<style type="text/css">
table {
	font-family: verdana, arial, sans-serif;
	font-size: 36px;
	color: #333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}

table th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}

table td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
</style>
</head>
<body>
	<table>
		<tr>
			<th>姓名</th>
			<th><a href="javascript:void(0)" οnclick="sorttab()">年龄</a></th>
			<th>地址</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>332</td>
			<td>日本</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>221</td>
			<td>中国</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>2511</td>
			<td>美国</td>
		</tr>
	</table>


</body>
</html>

行颜色间隔显示及高亮

<!DOCTYPE html>
<html>
<head>
<title>trColor.html</title>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	//行颜色间隔显示
	function trcolor() {
		var tabNode = document.getElementsByTagName("table")[0];

		var trs = tabNode.rows;

		for ( var x = 1; x < trs.length; x++) {

			if (x % 2 == 1)
				trs[x].className = "one";
			else
				trs[x].className = "two";
				
		    trs[x].οnmοuseοver=function(){
		       name = this.className;
		       this.className ="over";
		    }
		    trs[x].onmouseout = function(){
		    
		       this.className= name;
		    }
		}
	}

	var name;
	function over(trNode) {
		name = trNode.className;
		trNode.className = "over";
	}
	function out(trNode) {
		trNode.className = name;

	}
	window.onload = trcolor; //页面打开就有了
</script>

</head>
<style type="text/css">
.one {
	background-color: #33FFCC;
}

.two {
	background-color: #FFFF66;
}

.over {
	background-color: #00FF00;
}

table {
	border: 1px solid #B1CDE3;
	padding: 0;
	margin: 0 auto;
	border-collapse: collapse;
	font-size: 36px;
}
</style>
<body>
	<table>
		  <tr>
			<!-- <tr οnmοuseοver="over(this)" οnmοuseοut="out(this)"> -->
			<th>姓名</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>332</td>
			<td>日本</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>221</td>
			<td>中国</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>2511</td>
			<td>美国</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>2511</td>
			<td>美国</td>
		</tr>

		<tr>
			<td>王五</td>
			<td>2511</td>
			<td>美国</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>2511</td>
			<td>美国</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>2511</td>
			<td>美国</td>
		</tr>
	</table>
</body>
</html>