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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
javascript内存管理详细解析
Nov 11 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
微信小程序用户授权最佳实践指南
May 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
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
JsChart组件使用详解
2018/03/04 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
对python sklearn one-hot编码详解
2018/07/10 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Django中间件基础用法详解
2019/07/18 Python
python中bytes和str类型的区别
2019/10/21 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
python中xlutils库用法浅析
2020/12/29 Python
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
小学家长会邀请函
2014/01/23 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
电影红河谷观后感
2015/06/11 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
创业计划书之废品回收
2019/09/26 职场文书