javascript 实现简单的table排序及table操作练习


Posted in Javascript onDecember 28, 2012

在这个列子中,练习了table的操作,主要有:tBodies、rows、cells,还有有关数组的排序方法:sort
先上代码:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>table排序</title> 
</head> 
<body> 
<table id="tableTest" width="400" border="1"> 
<tbody> 
<tr> 
<td>2</td> 
<td>bbb</td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>5</td> 
<td>eee</td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>3</td> 
<td>ccc</td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>4</td> 
<td>ddd</td> 
<td> </td> 
<td> </td> 
</tr> 
<tr> 
<td>1</td> 
<td>aaa</td> 
<td> </td> 
<td> </td> 
</tr> 
</tbody> 
</table> 
<input type="button" id="sort" value="表格排序" /> 
<script> 
window.onload = function () { 
var oTable = document.getElementById('tableTest'); 
var oTbody = oTable.tBodies[0]; 
var oBtn = document.getElementById('sort'); 
var arr = [];//用来存放每一个tr 
var isAsc = true;//用来判断升序,还是降序 
oBtn.onclick = function () { 
for (var i = 0; i < oTbody.rows.length; i++ ) { 
arr[i] = oTbody.rows[i];//这里是把每一个tr存放到一个数组,而不是排序的依据(这里是cells[0].innerHTML) 
} 
//数组根据cells[0].innerHTML来排序 
arr.sort(function (td1, td2){ 
if(isAsc) { 
return parseInt(td1.cells[0].innerHTML) - parseInt(td2.cells[0].innerHTML); 
} else { 
return parseInt(td2.cells[0].innerHTML) - parseInt(td1.cells[0].innerHTML); 
} 
}); 
//把排序后的tr 重新插入tbody 
for(var j =0; j < arr.length; j++ ) { 
oTbody.appendChild(arr[j]); 
} 
//判断升序,降序 
isAsc = !isAsc; 
} 
} 
</script> 
</body> 
</html>

下面??乱恍┫喙氐闹?兜悖
我们都知道,平时操作一般的DOM可以getElementsByTagName、getElementById云云来获取相关节点
在table中当然这种方法也可以实现
显然,这样操作会很麻烦
所以,对于table我们可以用另一套方法、属性来操作:
在这之前,先说一些有关table的东东:
平时写table相信很多人会直接这么写:
<table id="tableTest" width="400" border="1"> 
<tr> 
<td>3</td> 
<td>ccc</td> 
<td> </td> 
<td> </td> 
</tr> 
</table>

如果,你firebug查看一下代码,你会发现会多出一个tbody来,明明源代码是没有的
这是为毛?!
其实,table的真正结构是:table中也包括:thead、tbody、tfoot,其中tbody是可以多个的
回到主题上来:
javascript中有关table元素的属性、方法:
caption:保存着对<caption>元素(如果有)的指针
tBodies:是一个<tbody>元素的HTMLCollection
tFoot:保存着对<tfoot>元素(如果有)的指针
tHead:保存着对<thead>元素(如果有)的指针
rows:是一个表格中所有行的HTMLCollection
createTHead():创建<thead>元素,将其放到表格中,并返回引用
createTFoot():创建<tfoot>元素,将其放到表格中,并返回引用
createCaption():创建<caption>元素,将其放到表格中,并返回引用
deleteTHead():删除<thead>元素
deleteTFoot():删除<tfoot>元素
deleteCaption():删除<caption>元素
deleteRow(pos):删除指定位置行
insertRow(pos):向rows集合中指定位置插入一个行
有关tbody的属性、方法
rows:保存着tbody所有行的HTMLCollection
deleteRow(pos):删除指定位置的行
insertRow(pos):向rows的集合中的指定位置插入一行,并返回对新插入行的引用
有关tr的属性、方法
cells:保存着tr所有td(单元格)的HTMLCollection
deleteCell(pos):删除指定位置的单元格
insetCell(pos):向cells的集合中的指定位置插入一个单元格,并返回对该单元格的引用
OK,就说这些………………
Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 #Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 #Javascript
JS声明变量背后的编译原理剖析
Dec 28 #Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 #Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 #Javascript
web性能优化之javascript性能调优
Dec 28 #Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 #Javascript
You might like
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
destoon之一键登录设置
2014/06/21 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
mongodb和php的用法详解
2019/03/25 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python操作MongoDB基础知识
2013/11/01 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
浅析Git版本控制器使用
2017/12/10 Python
Win8下python3.5.1安装教程
2020/07/29 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
小学生班会演讲稿
2014/01/09 职场文书
个人综合鉴定材料
2014/05/23 职场文书
健康状况证明模板
2014/10/23 职场文书
单位实习介绍信
2015/05/05 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
《检阅》教学反思
2016/02/22 职场文书
《打电话》教学反思
2016/02/22 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python