HTML DOM Table 对象
1:Table 对象
Table 对象代表一个 HTML 表格。
在 HTML 文档中 <table> 标签每出现一次，一个 Table 对象就会被创建。
2:Table 对象的集合
| 集合 |
描述 |
IE |
F |
O |
W3C |
| cells[] |
返回包含表格中所有单元格的一个数组。 |
5 |
1 |
1 |
No |
| rows[] |
返回包含表格中所有行的一个数组。 |
4 |
1 |
9 |
Yes |
| tBodies[] |
返回包含表格中所有 tbody 的一个数组。 |
4 |
|
|
Yes |
3: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 |
4:Standard Properties
| Property |
Description |
IE |
F |
O |
W3C |
| className |
Sets or returns the class attribute of an element |
5 |
1 |
9 |
Yes |
| dir |
Sets or returns the direction of text |
5 |
1 |
9 |
Yes |
| lang |
Sets or returns the language code for an element |
5 |
1 |
9 |
Yes |
| title |
Sets or returns an element's advisory title |
5 |
1 |
9 |
Yes |
6:insertRow() 方法
该方法返回一个 TableRow，表示新插入的行。
说明：该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。
新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。
如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。
若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。
提示：可以用 TableRow.insertCell() 方法给新创建的行添加内容。
下面的例子在表格的开头插入一个新行：
<html>
<head>
<script type="text/javascript">
function insRow() {
var x=document.getElementById('myTable').insertRow(0)
var y=x.insertCell(0)
var z=x.insertCell(1)
y.innerHTML="NEW CELL1"
z.innerHTML="NEW CELL2"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="插入行">
</body>
</html>
7：createTHead() 方法
createTHead() 方法用于在表格中获取或创建 <thead> 元素。返回一个 TableSection，表示该表的 <thead> 元素。如果该表格已经有了表头，则返回它。如果该表没有表头，则创建一个新的空 <thead> 元素，把它插入表格，并返回它。
下面的例子为表格创建了一个脚注：
<html>
<head>
<script type="text/javascript">
function createCaption(){
var x=document.getElementById('myTable').createTHead()
x.innerHTML="我的表格标题"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="createCaption()"
value="创建标题">
</body>
</html>
8：deleteRow() 方法
下面的两个实例都能够删除表格中的某一行：
示例1：
<html>
<head>
<script type="text/javascript">
function delRow(){
document.getElementById('myTable').deleteRow(0)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="delRow()"
value="Delete first row">
</body>
</html>
示例2：
<html>
<head>
<script type="text/javascript">
function deleteRow(r) {
var i=r.parentNode.parentNode.rowIndex
document.getElementById('myTable').deleteRow(i)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row 1</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 2</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 3</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
</table>
</body>
</html>
