使用表格排版进行年龄排序
一、相关操作
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>