用刚学的DHTML写的一个表格排序功能

之前已经讲过什么是DHMTL，这个我就不多讲了，稍后我会放一个关于DHTML的介绍页给大家，大家可以去看看。

相关DHTML文章：关于DHTML的一些简单介绍

这几天一直在练习DHTML的一些对象、方法、属性等等的操作，反正就感觉以前很向往的东西，终于现在能自己去亲自实现了，感觉还是非常高兴的。

其实在写这个程序的时候大致就会用到HTML+CSS+DOM+JavaScript。那么接下来我一一为大家呈现。

首先我定义了一段CSS代码，如下：

<style type="text/css">
	th a:link,th a:visited{color:#fff;text-decoration:none;}  //定义鼠标点击和点击后的样式
	table{width:500px;border-collapse:collapse;}
	table td{border:#669933 1px solid;padding:10px;text-align:center;}
	table th{border:#669933 1px solid;padding:10px;background:#99cc99;}
</style>

然后定义了一段HTML代码

<table id="info">
	<tr>
		<th>姓名</th>
		<th><a href="javascript:void(0)" onclick="arrDemo()">年龄</a></th>
		<th>城市</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>26</td>
		<td>上海</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>23</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>王五</td>
		<td>28</td>
		<td>重庆</td>
	</tr>
	<tr>
		<td>赵六</td>
		<td>27</td>
		<td>成都</td>
	</tr>
	<tr>
		<td>田七</td>
		<td>38</td>
		<td>沈阳</td>
	</tr>
	<tr>
		<td>周八</td>
		<td>30</td>
		<td>南昌</td>
	</tr>
	<tr>
		<td>方九</td>
		<td>44</td>
		<td>和田</td>
	</tr>
</table>

那么要达到下图的效果，就必须要写出一段js代码。

先看看效果图：

那么对于JS代码如下：

  <script type="text/javascript">
  var flag = true;
  function arrDemo(){
	var oTabNode = document.getElementById("info");
	var collTrNodes = oTabNode.rows;

	//定义一个临时容器，存储需要排序的行对象
	var trArr = [];

	//遍历原行集合，并将需要排序的行对象存储到临时容器中。
	for(var x=1;x<collTrNodes.length;x++){
		trArr[x-1] = collTrNodes[x];
	}

	//对临时容器排个序。
	mySort(trArr);

	//将排序完的行对象添加回表格。
	if(flag){
		for(var x=0;x<trArr.length;x++){
			trArr[x].parentNode.appendChild(trArr[x]);
		}
		flag = false;	
	}else{
		for(var x=trArr.length-1;x>=0;x--){
			trArr[x].parentNode.appendChild(trArr[x]);
		}
		flag = true;
	}


	function mySort(arr){
		for(var x=0;x<arr.length-1;x++){
			for(var y=x+1;y<arr.length;y++){
				if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML)){
					//arr[x].swapNode(arr[y]);//这个方法有时能用，有时不能用。
					var temp = arr[x];
					arr[x] = arr[y];
					arr[y] = temp;
				}
			}
		}	
	}
  }
  </script>

那么这就完成了表格的排序，可以是从小到大排序，再次点击将从大到小排序，当然，你也可以根据你自己的需要来进行更改代码。

演示地址：http://www.asni.cn/wp-content/uploads/2014/08/tabledemo.html