表格排序

最新推荐文章于 2024-05-16 16:52:30 发布

最新推荐文章于 2024-05-16 16:52:30 发布 · 106 阅读

文章标签：

#C #C++ #C# #HTML

JavaScript 专栏收录该内容

9 篇文章

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <script language="javascript">
	function compare(value1,value2,type){
		switch (type)
		{
			case "int":
				if(parseInt(value1)==parseInt(value2)){
					return 0;
				}else{
					return parseInt(value1)>parseInt(value2)?1:-1;
				}
			case "float":
				if(parseFloat(value1)==parseFloat(value2)){
					return 0;
				}else{
					return parseFloat(value1)>parseFloat(value2)?1:-1;
				}
			case "date":
				var date1 = new Date(Date.parse(value1));
				var date2 = new Date(Date.parse(value2));
				if(date1==date2){
					return 0;
				}else{
					return date1>date2?1:-1;
				}
			default:
				var value1 = value1.toString();
				var value2 = value2.toString();
				return value1.localeCompare(value2);
	   }
	}

	function swapNode(node1,node2){
		//获取父结点
		var _parent=node1.parentNode;
		//获取两个结点的相对位置
		var _t1=node1.nextSibling;
		var _t2=node2.nextSibling;
		//将node2插入到原来node1的位置
		if(_t1)_parent.insertBefore(node2,_t1);
		else _parent.appendChild(node2);
		//将node1插入到原来node2的位置
		if(_t2)_parent.insertBefore(node1,_t2);
		else _parent.appendChild(node1);
	} 

	function ascSort(stable,index,type){
		var mytable = document.getElementById(stable);
		var trObj = mytable.rows;

		for(var i=1;i<trObj.length-1;i++){
			for(var j=1;j<trObj.length-1;j++){
				var colValue1 = trObj[j].cells[index].innerText;
				var colValue2 = trObj[j+1].cells[index].innerText;

				var result = compare(colValue1,colValue2,type);
				//alert("colValue1: "+colValue1+"  colValue2: "+colValue2+" result="+result);
				if(result==1){
					swapNode(trObj[j],trObj[j+1]);
				}
			}
		}
	}

	function descSort(stable,index,type){
		var mytable = document.getElementById(stable);
		var trObj = mytable.rows;

		for(var i=1;i<trObj.length-1;i++){

			for(var j=1;j<trObj.length-1;j++){
				var colValue1 = trObj[j].cells[index].innerText;
				var colValue2 = trObj[j+1].cells[index].innerText;

				var result = compare(colValue1,colValue2,type);

				//alert("___colValue1: "+colValue1+"  colValue2: "+colValue2+" result="+result);
				if(result==-1){
					swapNode(trObj[j],trObj[j+1]);
				}
			}
		}
	}

	function sortTable(stable,index,type){
		var tag = index;
		if(mytable.sortCol == index){
			descSort(stable,index,type);
			tag = undefined;
		}else{
			ascSort(stable,index,type);
		}
		mytable.sortCol = tag;
	}
 </script>

 <BODY>
	<br>
	<br>
	<center>
		<table id="mytable" border="1" width="88%">
			<thead>
				<tr style="cursor:pointer">
					<th onClick="sortTable('mytable',0,'string')">姓名</th>
					<th onClick="sortTable('mytable',1,'int')">年龄</th>
					<th onClick="sortTable('mytable',2,'string')">身高</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>a</td>
					<td>3</td>
					<td>吧</td>
				</tr>
				<tr>
					<td>b</td>
					<td>8</td>
					<td>啊</td>
				</tr>
				<tr>
					<td>c</td>
					<td>1</td>
					<td>张</td>
				</tr>
				<tr>
					<td>c</td>
					<td>65</td>
					<td>刘</td>
				</tr>
			</tbody>
		</table>
		<br>


	</center>

 </BODY>
</HTML>