一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 页面特效

推荐专题

最新下载

1

命运冠位指定魅族
1.51GB 类型： 策略卡牌
2

排水模拟器
140.44M 类型： 休闲益智
3

极限飙车吃鸡
69.88MB 类型： 赛车竞速
4

疯狂派对go
115.07M 类型： 动作冒险
5

兔子胡萝卜跑
98.67M 类型： 动作冒险
6

塔楼大亨
41.32M 类型： 模拟经营
7

罗马崛起
72.40M 类型： 策略塔防
8

迷雾求生
47.46M 类型： 角色扮演
9

卡车运输模拟
74.68M 类型： 模拟经营
10

美味星球终极一口
102.1MB 类型： 休闲益智

热门教程

1

诛仙2鬼王怎么加点鬼王加点推荐
时间：2025-08-20 类型： 游戏攻略
2

诛仙2见影灵泉奇遇任务怎么做见影灵泉奇遇任务流程攻略
时间：2025-08-20 类型： 游戏攻略
3

三国天下归心诸葛亮怎么样诸葛亮技能介绍一览
时间：2025-08-20 类型： 游戏攻略
4

三国天下归心追击队怎么玩追击队玩法教学
时间：2025-08-20 类型： 游戏攻略
5

三国天下归心武将怎么获得武将获取方法
时间：2025-08-20 类型： 游戏攻略
6

星痕共鸣剧毒蜂巢怎么获取剧毒蜂巢获取攻略
时间：2025-08-20 类型： 游戏攻略
7

新三国志曹操传李儒之影怎么打李儒之影打法教学
时间：2025-08-20 类型： 游戏攻略
8

辉烬队伍怎么搭配配队攻略指南
时间：2025-08-20 类型： 游戏攻略
9

创造吧我们的星球种田玩法怎么玩种田玩法介绍一览
时间：2025-08-20 类型： 游戏攻略
10

华夏千秋怎么表白表白方法一览
时间：2025-08-20 类型： 游戏攻略

js 简单表格排序实例代码

时间：2022-06-25 20:30:35 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta name="description" content="简单排序功能">
<meta name="keywords" content="简单排序功能">
<link href="<a%20href=" http: target="_blank">css/style.css" rel="stylesheet">
<title>简单排序功能</title>
<style type="text/css">
	#sort{  margin: 50px auto;}
	table{ margin-top: 20px; text-align: center; border: 1px solid #ccc;}
	td{   font: 14px/30px SimSun;}
</style>
<script>
	window.onload = function(){
		var oTable = document.getElementById('table');
		var oUp = document.getElementById('up');
		var oDown = document.getElementById('down');
		var oUp<a href="https://www.111cn.net/office/144841.htm" target="_blank">Word = document.getElementById('upWord');
		var oDownWord = document.getElementById('downWord');
		var aRow = oTable.tBodies[0].rows;
		/* 按序号排 */
		oUp.onclick = function(){
			tabSort('up', 0, 'num');
		};
		oDown.onclick = function(){
			tabSort('down', 0, 'num');
		};
		/* 按姓名排 */
		oUpWord.onclick = function(){
			tabSort('up', 1, 'word');
		};
		oDownWord.onclick = function(){
			tabSort('down', 1, 'word');
		};

function tabSort(upOrDown, col, type){
		//upOrDown:升序or降序, col:根据那一列值排序, type:按数字or汉字排序
			var arr=[];

for(var i = 0; i < aRow.length; i++){
				arr[i]=aRow[i];
			}

arr.sort(function(row1, row2){
				var s1 = row1.cells[col].innerHTML;
				var s2 = row2.cells[col].innerHTML;
				if(type == 'num'){
					// 排序数字
					return upOrDown == 'up' ? s1 - s2 : s2 - s1;
				}else{
					// 排序汉字
					return upOrDown == 'up' ? s1.localeCompare(s2) : s2.localeCompare(s1);
				}
			});

for (var i = 0; i < aRow.length; i++) {
				oTable.tBodies[0].appendChild(arr[i]);
			};
		}
	}
</script>

<div class="container cls">
		<div id="sort">
		    <table id="table" border="1" cellpadding="0" cellspacing="0">
		    	<thead>
		    		<tr>
		    			<td>序号</td>
		    			<td>姓名</td>
		    			<td>年龄</td>
		    			<td>性别</td>
		    			<td>所在地</td>
		    		</tr>
		    	</thead>
		    	<tbody>
			    	<tr>
			    		<td>6</td>
			    		<td>李六</td>
			    		<td>19</td>
			    		<td>男</td>
			    		<td>上海</td>
			    	</tr>
			    	<tr>
			    		<td>3</td>
			    		<td>张三</td>
			    		<td>22</td>
			    		<td>男</td>
			    		<td>南京</td>
			    	</tr>
			    	<tr>
			    		<td>2</td>
			    		<td>Amy</td>
			    		<td>18</td>
			    		<td>女</td>
			    		<td>上海</td>
			    	</tr>
			    	<tr>
			    		<td>4</td>
			    		<td>李四</td>
			    		<td>19</td>
			    		<td>女</td>
			    		<td>上海</td>
			    	</tr>
			    	<tr>
			    		<td>8</td>
			    		<td>小红</td>
			    		<td>22</td>
			    		<td>女</td>
			    		<td>上海</td>
			    	</tr>
			    	<tr>
			    		<td>9</td>
			    		<td>小兰</td>
			    		<td>19</td>
			    		<td>女</td>
			    		<td>北京</td>
			    	</tr>
			    	<tr>
			    		<td>1</td>
			    		<td>Jim</td>
			    		<td>20</td>
			    		<td>男</td>
			    		<td>北京</td>
			    	</tr>
			    	<tr>
			    		<td>10</td>
			    		<td>John</td>
			    		<td>18</td>
			    		<td>男</td>
			    		<td>上海</td>
			    	</tr>
			    	<tr>
			    		<td>5</td>
			    		<td>张五</td>
			    		<td>24</td>
			    		<td>男</td>
			    		<td>北京</td>
			    	</tr>
			    	<tr>
			    		<td>7</td>
			    		<td>小明</td>
			    		<td>20</td>
			    		<td>男</td>
			    		<td>南京</td>
			    	</tr>
		    	</tbody>
		    </table>
		</div>
	</div>

提示：您可以先修改部分代码再运行

相关文章

热门栏目