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打开新窗口同时关闭旧窗口
Jan 16 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
下载给定网页上图片的方法
2014/02/18 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
检讨书范文500字
2015/01/28 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python