Table对象代表一个HTML表格。
在HTML文档中<table>标签每出现一次，一个Table对象就会被创建。
1.Table 对象集合
| 集合 |
描述 |
IE |
F |
O |
W3C |
| cells[] |
返回包含表格中所有单元格的一个数组。 |
5 |
1 |
1 |
No |
| rows[] |
返回包含表格中所有行的一个数组。 |
4 |
1 |
9 |
Yes |
| tBodies[] |
返回包含表格中所有 tbody 的一个数组。 |
4 |
|
|
Yes |
2.Table 对象属性
| 属性 |
描述 |
IE |
F |
O |
W3C |
| align |
表在文档中的水平对齐方式。（已废弃） |
- |
- |
- |
- |
| bgColor |
表的背景颜色。（已废弃） |
- |
- |
- |
- |
| border |
设置或返回表格边框的宽度。 |
4 |
1 |
9 |
Yes |
| caption |
对表格的 <caption> 元素的引用。 |
4 |
1 |
9 |
Yes |
| cellPadding |
设置或返回单元格内容和单元格边框之间的空白量。 |
4 |
1 |
9 |
Yes |
| cellSpacing |
设置或返回在表格中的单元格之间的空白量。 |
4 |
1 |
9 |
Yes |
| frame |
设置或返回表格的外部边框。 |
4 |
1 |
9 |
Yes |
| id |
设置或返回表格的 id。 |
4 |
1 |
9 |
Yes |
| rules |
设置或返回表格的内部边框（行线）。 |
4 |
1 |
9 |
Yes |
| summary |
设置或返回对表格的描述（概述）。 |
6 |
1 |
9 |
Yes |
| tFoot |
返回表格的 TFoot 对象。如果不存在该元素，则为 null。 |
4 |
1 |
9 |
Yes |
| tHead |
返回表格的 THead 对象。如果不存在该元素，则为 null。 |
4 |
1 |
9 |
Yes |
| width |
设置或返回表格的宽度。 |
4 |
1 |
9 |
Yes |
3. 标准属性
| 属性 |
描述 |
IE |
F |
O |
W3C |
| className |
设置或返回元素的 class 属性。 |
5 |
1 |
9 |
Yes |
| dir |
设置或返回文本的方向。 |
5 |
1 |
9 |
Yes |
| lang |
设置或返回元素的语言代码。 |
5 |
1 |
9 |
Yes |
| title |
设置或返回元素的 title 属性。 |
5 |
1 |
9 |
Yes |
4. Table 对象方法
| 方法 |
描述 |
| createCaption() |
为表格创建一个 caption 元素。 |
| createTFoot() |
在表格中创建一个空的 tFoot 元素。 |
| createTHead() |
在表格中创建一个空的 tHead 元素。 |
| deleteCaption() |
从表格删除 caption 元素以及其内容。 |
| deleteRow() |
从表格删除一行。 |
| deleteTFoot() |
从表格删除 tFoot 元素及其内容。 |
| deleteTHead() |
从表格删除 tHead 元素及其内容。 |
| insertRow() |
在表格中插入一个新行。 |
| moveRow |
交换行的位置。语法：oRow = object.moveRow(iSource, iTarget)。这是一个不公开的方法。可应用于TABLE, TBODY, TFOOT, THEAD, HTMLTableElement Constructor, HTMLTableSectionElement Constructor |
| firstPage |
使表格跳到第一页。语法：object.firstPage()。这是一个不公开的方法。可应用于TABLE, HTMLTableElement Constructor。只有当表格是动态获取数据并且设置了dataPageSize时有效。与之相似的方法包括：nextPage、PervouPage、lastPage。 |
(1)moveRowg使用示例
function fn_moveRow(sourceIndex, targetIndex) {
var tb = document.getElementById("tbEmployee");
tb.moveRow(sourceIndex, targetIndex);
}
(2)firstPage使用示例
<xml id="xmlEmployee" src="Employee.xml" />
<input type="button" value="上一页" onclick="fn_PreviousPage ();" />
<input type="button" value="下一页" onclick="fn_NextPage();" />
<table id="tbEmployee1" dataSrc="#xmlEmployee" dataPageSize=2 border="1">
<thead>
<td>姓名</td><td>性别</td><td>年龄</td>
</thead>
<tr>
<td><input type="textbox" datafld="ID"></td><td><input type="textbox" datafld="Gender"></td><td><input type="textbox" datafld="Age"></td>
</tr>
</table>
//上一页
function fn_PreviousPage() {
var tb = document.getElementById("tbEmployee1");
tb.previousPage();
}
//下一页
function fn_NextPage() {
var tb = document.getElementById("tbEmployee1");
tb.nextPage();
}
Employee.xml内容如下：
<?xml version="1.0" encoding="utf-8" ?>
<Employees>
<Employee ID="kangjianmin" Gender="Male" Age="36" />
<Employee ID="wuyunfeng" Gender="Male" Age="30" />
<Employee ID="zhaojing" Gender="Male" Age="22" />
<Employee ID="zhangxuewei" Gender="Male" Age="24" />
<Employee ID="dengqin" Gender="FeMale" Age="26" />
<Employee ID="luomaoqin" Gender="FeMale" Age="22" />
</Employees>