表格的层次结构

<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--表格的更多相关文章

  1. JavaScript快速入门(四)——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  2. javascript快速入门21--DOM总结

    跨浏览器开发 市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天.历史上已经有不少方 ...

  3. Web开发初探之JavaScript 快速入门

    本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...

  4. Javascript快速入门(上篇)

    Javascript的熟练之路,小弟来了. JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript ...

  5. Javascript快速入门(下篇)

    Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...

  6. javascript快速入门8--值,类型与类型转换

    原始值和引用值 在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值. 原始值(primitive value)是存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量 ...

  7. javascript快速入门

    这个在w3school在线文档讲解的很详细,还能在线练习. 所以我只写一些入门的东西和最常用的总结以及注意事项: JavaScript 是脚本语言 一般被人们称为JS,Jquery就是对js语言的封装 ...

  8. JavaScript快速入门(五)——表达式运算

    赋值运算 赋值运算的形式为左值 = 右值.如果同个表达式中有多个赋值运算,则从右到左运算.例如: a = b = c; // 和下面两行等价 b = c; a = b; 另外一种赋值运算的形式叫做复合 ...

  9. javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

  10. JavaScript快速入门-ECMAScript本地对象(String)

    一.String对象 String对象和python中的字符串一样,也有很多方法,这些方法大概分为以下种类: 1.索引和查找 1.charAt()   返回指定位置的字符. 2.charCodeAt( ...

随机推荐

  1. 【git】git提交忽略不必要的文件或文件夹

    对于经常使用Git的朋友来说,.gitignore配置一定不会陌生.废话不说多了,接下来就来说说这个.gitignore的使用. 首先要强调一点,这个文件的完整文件名就是".gitignor ...

  2. Linux下Tomcat开机自动启动

    linux下tomcat开机自动启动有两种方法,一种是简单,一种是复杂而又专业的,使用shell脚本要实现,我们一般推荐shell脚本启动方式.下面我们分别介绍这两种方法. 1.shell脚本启动 众 ...

  3. 【Shell 编程基础第一部分】第一个Shell脚本HelloShell及一些简单的Shell基础书写与概念;

    http://blog.csdn.net/xiaominghimi/article/details/7603000 本站文章均为李华明Himi原创,转载务必在明显处注明:转载自[黑米GameDev街区 ...

  4. Objective-C中ORM的运用:实体对象和字典的相互自动转换

    http://blog.csdn.net/cooldragon/article/details/18991973 iOS开发中基于ORM的框架很多,如SQLitePersistentObject,实际 ...

  5. Makefile 的 prequisite 執行順序 single multi thread

    Makefile 代碼如下: B 需要 A 的 產出, all: A B A B 是 target, case 1: single-thread make -j1 則執行的順序為 A -> B ...

  6. HTTP===返回结果的HTTP状态码

    HTTP 状态码负责表示客户端 HTTP 请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作. 1.状态码告知从服务器端返回的请求结果 状态码的职责是当客户端向服务器端发送请求时,描述返 ...

  7. Mac自带的SSH客户端

    https://segmentfault.com/q/1010000002806469 还能设置连接成持久连接,方便使用: ttps://www.zhihu.com/question/20541129 ...

  8. PHPExcel 使用(1)

    最近在项目中要用到PHP生成EXCEL,上网找了一下,发现PHPEXCEL挺不错,用了一下,感觉还行,就是设置单元格格式的时候比较麻烦,总体来说功能还是比较强大的,还有生成PDF什么的,发一个实例吧 ...

  9. Selenium2+python自动化53-unittest批量执行(discover)【转载】

    前言 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到unittet里面的discover方法来加载用例了. 加载用例后,用unittest里面的Text ...

  10. Selenium2+python自动化46-js解决click失效问题【转载】

    前言 有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应.这种问题遇到了,是比较头疼的,因为没任何报错,只是click事件失效了. 本篇用2种方法解决这种诡异的点击事件失效问题 一.遇到的问 ...