javascript快速入门16--表格
表格的层次结构
<table border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">脚注</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</tbody>
<tbody>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</tbody>
</table>
上面是一个创建表格所用到的所有标签,但一些标签是可写可不写的,事实上一般的表格只需写上tr与td标签就行了,而标题caption,表头thead表尾tbody等则是一些语义性元素
表格对象的一些属性
var table= document.getElementById("myTable");
//获取表格标题caption标签
var caption = table.getElementsByTagName("caption")[0];
//HTML DOM提供的更简单的方法
caption= table.caption;//返回表格标题caption标签,如果没有则返回null
if (caption) {
alert(caption.firstChild.nodeValue);//输出标题文本
}
var thead =table.tHead;//获取表头
var tfoot = table.tFoot;//获取表尾
由于caption,thead,tfoot这些标签一个表格中只能出现一次,所以HTML DOM提供了直接的属性来访问,而对于tr,td,th,tbody这些重复的标签,HTML DOM则给Table对象增加了一些集合来访问
//获取所有tr
var rows = table.getElementsByTagName("tr");//但会获取嵌套表格中的tr
//rows集合只会包含表格的行,而不包含表格下面嵌套表格的行
rows = table.rows;//返回包含表格中所有行的一个数组
alert(rows[0].innerHTML);
var tBodies = table.tBodies;//返回包含表格中所有tbody的一个数组
var cells =table.cells;//返回包含表格中所有单元格的一个数组
注意,对于Table对象的cells属性,它将返回所有td,th标签,而对于tBodies属性,即使HTML 源代码中没有tbody标签,也会默认有一个tbody
表格对象的一些方法
创建标题:createCaption() 方法用于在表格中获取或创建元素。返回一个 HTMLElement 对象,表示该表的元素。如果该表格已经有了标题,则返回它。如果该表没有元素,则创建一个新的空元素,把它插入表格,并返回它。
var caption = document.createElement("caption");
caption.appendChild(document.createTextNode("新标题"));
table.insertBefore(caption,table.firstChild);
/*
上面方法有两大缺点:
1.方法复杂
2.如果已经存在caption标签,则会造成caption标签重复,导致后插入的无效
*/
caption = table.createCaption();//注意,并不需要指定要将其插入到哪个表格中
//因为该方法必须在对应的表格对象上调用
caption.innerHTML = "新标题";
与createCaption相似的还有:
- createTFoot() 在表格中创建一个空的 tFoot 元素;返回一个 TableSection,表示该表的〈tfoot〉 元素。如果该表格已经有了脚注,则返回它。如果该表没有脚注,则创建一个新的空 〈tfoot〉 元素,把它插入表格,并返回它。
- createTHead() 在表格中创建一个空的 tHead 元素;返回一个 TableSection,表示该表的〈thead〉元素。如果该表格已经有了表头,则返回它。如果该表没有表头,则创建一个新的空〈thead〉元素,把它插入表格,并返回它。
既然有增加的方法,就有对应的删除的方法
- deleteCaption() 从表格删除 caption 元素以及其内容。 如果该表有 〈caption〉 元素,则从文档树种删除它。否则,什么也不做。
- deleteTFoot() 从表格删除 tFoot 元素及其内容。 如果该表有 〈tfoot〉 元素,则将它从文档树种删除,否则什么也不做。
- deleteTHead() 方法用于从表格删除thead 元素。如果该表有 〈thead〉元素,则将它从文档树种删除,否则什么也不做。
添加与删除行
- insertRow() 在表格中插入一个新行。 返回一个 TableRow,表示新插入的行。该方法创建一个新的 TableRow 对象,表示一个新的〈tr〉标记,并把它插入表中的指定位置。新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。如果表是空的,则新行将被插入到一个新的〈tbody〉 段,该段自身会被插入表中。
- deleteRow() 从表格删除一行。参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。〈thead〉和〈tfoot〉 中的行与表中其它行一起编码。
行 (TableRow) 对象
行对象的一些属性:cells属性返回行中所有单元格的一个数组。rowIndex属性返回该行在表中的位置。sectionRowIndex属性返回在 tBody 、tHead 或 tFoot 中,行的位置。
var row = table.rows[0];
alert(row.cells.length);//第一行中单元格的数目
alert(row.rowIndex);//
TableRow 对象的方法
- deleteCell() 删除行中的指定的单元格。参数 index 是要删除的表元在行中的位置。该方法将删除表行中指定位置的表元。
- insertCell() 在一行中的指定位置插入一个空的td元素。 返回一个 TableCell 对象,表示新创建并被插入的 td 元素。 该方法将创建一个新的 td 元素,把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。请注意,该方法只能插入 td 数据表元。若需要给行添加头表元,必须用 Document.createElement() 方法和 Node.insertBefore() 方法(或相关的方法)创建并插入一个 th 元素。
var row = table.rows[2];
var cell = row.insertCell(2);
cell.innerHTML = "新插入的单元格";
//上面的代码与下面的等效(但不考虑空白文本节点)
var cell = document.createElement("td");
cell.innerHTML = "新插入的单元格";
row.insertBefore(cell,row.childNodes[2]);
//删除单元格
row.deleteCell(2);
//等效代码(同样不考虑空白文本节点)
row.removeChild(row.childNodes[2]);
TableCell 单元格对象
与TableCell对象相关的有用的属性只有一个:cellIndex属性返回单元在格行中的下标
alert(table.rows[2].cells[3].cellIndex);//
javascript快速入门16--表格的更多相关文章
- JavaScript快速入门(四)——JavaScript函数
函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
- javascript快速入门21--DOM总结
跨浏览器开发 市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天.历史上已经有不少方 ...
- Web开发初探之JavaScript 快速入门
本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...
- Javascript快速入门(上篇)
Javascript的熟练之路,小弟来了. JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript ...
- Javascript快速入门(下篇)
Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...
- javascript快速入门8--值,类型与类型转换
原始值和引用值 在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值. 原始值(primitive value)是存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量 ...
- javascript快速入门
这个在w3school在线文档讲解的很详细,还能在线练习. 所以我只写一些入门的东西和最常用的总结以及注意事项: JavaScript 是脚本语言 一般被人们称为JS,Jquery就是对js语言的封装 ...
- JavaScript快速入门(五)——表达式运算
赋值运算 赋值运算的形式为左值 = 右值.如果同个表达式中有多个赋值运算,则从右到左运算.例如: a = b = c; // 和下面两行等价 b = c; a = b; 另外一种赋值运算的形式叫做复合 ...
- javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- JavaScript快速入门-ECMAScript本地对象(String)
一.String对象 String对象和python中的字符串一样,也有很多方法,这些方法大概分为以下种类: 1.索引和查找 1.charAt() 返回指定位置的字符. 2.charCodeAt( ...
随机推荐
- css的@符号的作用简单介绍
- How to learn wxPython
目录 How to learn wxPython Learn Python Choose a good editor Install wxPython Read the wxPython tutori ...
- 让Playground支持UIKit框架
http://blog.diveinedu.cn/playground_uikit_ios/ 让Playground支持UIKit框架 发表于 作者 排云鹤 — 暂无评论 ↓ Xcode 6新增了Pl ...
- Swift开发学习(二):Playground
http://blog.csdn.net/powerlly/article/details/29674253 Swift开发学习:Playground 关于 对于软件用户.游戏玩家,大家一直都在提倡用 ...
- glib windows下编译
记录的比较粗糙,但是绝对可行的 一些小的瑕疵以后再解决吧 (android版本的过几天再贴,移植到android已经通过) msys+mingw包下载: http://sourceforge.net/ ...
- python 学习笔记 多进程
要让python程序实现多进程,我们先了解操作系统的相关知识 Unix/Linux操作系统提供了一个fork()系统调用,他非常特殊,普通的函数调用,调用一次,返回一次,但是fork调用一次, 返回两 ...
- Markdown文件导出为HTML的小程序
Markdown文件导出为HTML的小程序 为什么做 最近把一些学习经验记下来,总结成MarkDown文件,不知不觉已经有12篇了. Sublime Text 的 MarkDown Preview 插 ...
- Newtonsoft.Json 序列化和反序列化 以及时间格式
1.JSON序列化 string JsonStr= JsonConvert.SerializeObject(Entity); eg: A a=new A(); a.Name="Elain ...
- python多线程实现多任务
#转载请联系 1.什么是线程? 进程是操作系统分配程序执行资源的单位,而线程是进程的一个实体,是CPU调度和分配的单位.一个进程肯定有一个主线程,我们可以在一个进程里创建多个线程来实现多任务. --- ...
- 【C++】隐式类型转换和 explicit关键字
来自:黄邦勇帅 1. 当类中带有一个参数的构造函数时,将执形对象的隐式转换,比如有类 A,有一个带有一个参数的构造函数A(int i){}则当出现语句A m=1;就会调用带有一个参数的构造函数来创建对 ...