个人博客
专注IT梦想的地方

用刚学的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代码。

先看看效果图:

tabledemo

 

那么对于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

赞(1) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » 用刚学的DHTML写的一个表格排序功能

评论 2

评论前必须登录!

 

  1. #0

    加载什么代码呢,打开很卡的样子。

    http://qianjinpianfang.com/6年前 (2014-08-15)
    • 请问一下,你是什么网络的线路?如果代码加载很慢,请直接打开演示页面即可观看到效果。

      智言微博6年前 (2014-08-16)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏