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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
jQuery的三种$()
Dec 30 Javascript
JS实现div居中示例
Apr 17 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
javascript实现点击产生随机图形
Jan 25 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 第二节 数据类型之转换
2012/04/28 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
理解Javascript闭包
2013/11/01 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python FFT合成波形的实例
2019/12/04 Python
Python安装Bs4的多种方法
2020/11/28 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
英文自荐信
2013/12/15 职场文书
个人股份合作协议书
2014/10/24 职场文书
计生个人工作总结
2015/02/28 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis