使用表格排版进行年龄排序

使用表格排版进行年龄排序

一、相关操作

1、.tHead——表格头,只有一个

2、.tBodies——表格正文,可有多个

3、.tFoot——表格尾,只有一个

4、.rows——行,可有多个

5、.cells——列,可有多个

写法:元素

.tBodies[0].rows[1].cells[1].innerHTML

代表: 表格正文里的的第二个的第二列的内容,为下面html的11

<table>
    <thead><!--表格头-->
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>  <!--如果tbody不写,浏览器解析的时候也会自动加上,为了规范建议写-->
        <tr> <!--表格行-->
            <td></td><!--表格列-->
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>11</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

代表

var countCell=$rows[1].cells.length-$rows[0].cells.length;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
		</style>
		<script>
			/**
				功能实现:1、实现表格按表格第一列ID排序
				
			*/
			window.onload = function(){
				var oTab = document.getElementById('tab1');
				
				var oBtn = document.getElementById('btn1');
				var arr = [];
				for(var i=0;i<oTab.tBodies[0].rows.length;i++){
					arr.push(oTab.tBodies[0].rows[i]);
						
				}
				
				arr.sort(function(tr1,tr2){
					var td1 = parseInt(tr1.cells[0].innerHTML);
					var td2 = parseInt(tr2.cells[0].innerHTML);
					return  td1 - td2 ;
				});
				
				oBtn.onclick = function(){
					for(var i=0;i<arr.length;i++){
						oTab.tBodies[0].appendChild(arr[i]);
					}
					
					
				}
			}
			
			
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="排序" />
		<table border="1px" width="300px" id="tab1">
			<tHead>
				<tr>
					<td>ID</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
			</tHead>
			<tBody>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr>
					<td>6</td>
					<td>刘小二</td>
					<td>36</td>
				</tr>
				
				<tr>
					<td>4</td>
					<td>赵六</td>
					<td>50</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Json</td>
					<td>27</td>
				</tr>
				<tr>
					<td>5</td>
					<td>王小七</td>
					<td>30</td>
				</tr>
				
			</tBody>
		</table>
		
	</body>
</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vue1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值