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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python正则简单实例分析
2017/03/21 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Python类的继承super相关原理解析
2020/10/22 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS