作者:芬飞满天2011 | 来源:互联网 | 2018-06-19 13:20
在这个列子中,练习了table的操作,主要有:tBodies、rows、cells,还有有关数组的排序方法:sort
先上代码:
代码如下:
2 |
bbb |
|
|
5 |
eee |
|
|
3 |
ccc |
|
|
4 |
ddd |
|
|
1 |
aaa |
|
|
下面啰嗦一些相关的知识点:
我们都知道,平时操作一般的DOM可以getElementsByTagName、getElementById云云来获取相关节点
在table中当然这种方法也可以实现
显然,这样操作会很麻烦
所以,对于table我们可以用另一套方法、属性来操作:
在这之前,先说一些有关table的东东:
平时写table相信很多人会直接这么写:
代码如下:
如果,你firebug查看一下代码,你会发现会多出一个tbody来,明明源代码是没有的
这是为毛?!
其实,table的真正结构是:table中也包括:thead、tbody、tfoot,其中tbody是可以多个的
回到主题上来:
Javascript中有关table元素的属性、方法:
caption:保存着对
元素(如果有)的指针
tBodies:是一个元素的HTMLCollection
tFoot:保存着对元素(如果有)的指针
tHead:保存着对元素(如果有)的指针
rows:是一个表格中所有行的HTMLCollection
createTHead():创建元素,将其放到表格中,并返回引用
createTFoot():创建元素,将其放到表格中,并返回引用
createCaption():创建元素,将其放到表格中,并返回引用
deleteTHead():删除元素
deleteTFoot():删除元素
deleteCaption():删除元素
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,就说这些………………
推荐阅读
-
表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ...
[详细]
蜡笔小新 2023-10-15 18:44:55
-
Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ...
[详细]
蜡笔小新 2023-10-15 16:40:16
-
-
Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ...
[详细]
蜡笔小新 2023-10-13 12:28:22
-
但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法:一:跳转到新页面,并且是在新窗口中打开时:复制代码代码如下:fu ...
[详细]
蜡笔小新 2023-10-13 12:25:13
-
JavaScript在常人看来都是门出不了厅堂的小语言,仅管它没有明星语言的闪耀,但至少网页的闪耀还是需要它的,同时它是一门很实用的语言,本人平时就喜欢拿它来写点实用工具或应用,本文演示用JavaSc ...
[详细]
蜡笔小新 2023-10-13 09:49:41
-
JavaScript概述1.JavaScript定义JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言,只能由浏览器解释执行。其中:脚本语言:解释运行( ...
[详细]
蜡笔小新 2023-10-13 09:36:45
-
JavaScript实现在页面间传值的方法-本文实例讲述了JavaScript实现在页面间传值的方法。分享给大家供大家参考。具体如下:问题如下:在a.html页面中,的 ...
[详细]
蜡笔小新 2023-10-13 01:38:28
-
Web前端开发源于传统的互联网,互联网普及让人才需求量居高不下,随着移动互联网的高速发展,移动终端的前端开发也越来越受到重视, ...
[详细]
蜡笔小新 2023-10-12 14:13:27
-
后端开发|php教程不明白,移植,事情后端开发-php教程为什么我客户端通过http请求服务端服务端发张图片到客户端这个传输为什么那么慢一共也就300多kb但一共传了5秒多如果直接 ...
[详细]
蜡笔小新 2023-10-12 10:30:08
-
本文是《JavaScript深度解析》系列文章第23篇(共51篇)文档对象模 ...
[详细]
蜡笔小新 2023-10-11 22:37:09
-
JSCoverage-->JavaScript测试覆盖率检测工具(转),Go语言社区,Golang程序员人脉社 ...
[详细]
蜡笔小新 2023-10-10 16:48:01
-
打开http:www.vancl.com发现采用的Asp.net,这点我感到很欣慰,毕竟国内采用.net技术体系的优秀网站少之又少。好奇之余右键-查看源 ...
[详细]
蜡笔小新 2023-10-10 16:27:40
-
一直感觉CSDN社区的树形结构特别的人性化,直观化。最近做系统的时候需要用到这个树形结构,于是模仿CSDN的树形结构做了一个自己的树形结构, ...
[详细]
蜡笔小新 2023-10-10 16:17:11
-
SeleniumWebDriver3.0自动化测试框架实战指南 ...
[详细]
蜡笔小新 2023-10-10 05:23:15
-
一、选择器性能优化建议1.总是从#id选择器来继承这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。1$(#content).hide() ...
[详细]
蜡笔小新 2023-09-25 16:07:48
-