25、DOM的高级应用2-------表格内容的排序

1、DOM的高级应用2-------表格内容的排序(一次正序排列,一次反序排列)

2、实现的原理,就是利用数组的排序

3、实现的代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表格的排序</title>
		<script>
			window.onload = function() {
				var oBtn = document.getElementById('btn1');
				var oTab = document.getElementById('tab1');
				var bAsc = true; //是否是升序排列
				oBtn.onclick = function() {
					var arr = [];
					var i = 0;
					//1.转成数组
					for (i = 0; i < oTab.tBodies[0].rows.length; i++) {
						arr[i] = oTab.tBodies[0].rows[i];
					}
					//2.数组排序
					arr.sort(function(tr1, tr2) {
						if (bAsc) {
							return parseInt(tr1.cells[0].innerHTML) - parseInt(tr2.cells[0].innerHTML);
						} else {
							return parseInt(tr2.cells[0].innerHTML) - parseInt(tr1.cells[0].innerHTML);
						}
					});
					//3.重新插入
					for (i = 0; i < arr.length; i++) {
						oTab.tBodies[0].appendChild(arr[i]);
					}
					bAsc = !bAsc;
					/*if(bAsc)
					{
						bAsc=false;
					}
					else
					{
						bAsc=true;
					}*/
				};
			};
		</script>
	</head>

	<body>
		<input id="btn1" type="button" value="排序" />
		<table id="tab1" border="1" width="400">
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>3</td>
					<td>莫莫</td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td>Leo</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>aaa</td>
					<td></td>
				</tr>
				<tr>
					<td>6</td>
					<td>ccc</td>
					<td></td>
				</tr>
				<tr>
					<td>1</td>
					<td>Blue</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>bbb</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>

</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值