Table对象集合
Table对象:表示HTML文档中的表,对于文档中每个<table>标记,浏览器都创建一个Table对象.
|
集合
|
描述
|
cells[] |
获取包含表格中所有单元格的数组 |
rows[] |
获取包含表格中所有行的数组 |
tBodies[] |
获取包含表格中所有tbody的数组 |
Table对象属性
|
border |
设置或获取表格边框 |
caption |
设置或获取表格标题 |
cellPadding |
设置或获取每个单元格边框与内容的宽度 |
cellSpacing |
设置或获取表格中单元格的间距 |
frame |
设置或获取表格具有哪些边框 |
rules |
设置或获取表格中的内部边框 |
summary |
设置或获取表格的描述 |
tFoot |
获取表格的tFoot对象 |
tHead |
获取表格的tHead对象 |
width |
设置或获取表格宽度 |
accessKey |
设置或获取该对象的快捷键 |
align |
设置或获取表格行中单元格中文字的水平对齐方向 |
chOff |
设置或获取单元格的对齐偏移特征 |
colSpan |
设置或获取单元格跨越的表格列数 |
height |
设置或获取表格行的高度 |
innerHTML |
设置或获取表格行标记间的HTML文本 |
innerText |
设置或获取表格行标记间的文本 |
rowIndex |
获取表格行对象在表格行集合中的位置 |
sectionRowIndex |
获取tBody,tHead或tFoot中,表格行对象在行集合中的位置 |
tabIndex |
设置或获取表格行的Tab顺序索引 |
vAlign |
设置或获取表格行中文字的垂直对齐方向 |
Table对象方法
|
createCaption() |
为表格创建一个空的标题元素 |
createTFoot() |
为表格创建一个空的tFoot元素 |
createTHead() |
为表格创建一个空的tHead元素 |
deleteCaption() |
删除表格的标题元素 |
deleteRow() |
删除指定的表格行 |
deleteTFoot() |
删除表格的tFoot元素 |
deleteTHead() |
删除表格的tHead元素 |
blur() |
取消该对象的激活状态 |
click() |
模拟鼠标单击该对象 |
deleteCell([i]) |
删除表格行中的指定的单元格 |
focus() |
将焦点移至表格行 |
insertCell() |
在表格行中插入新单元格 |
insertRow() |
向表格中插入新行 |
|
|
TableCell对象属性
TableCell对象:表示HTML文档中表的单元格,对于文档中每个 <td>标记,浏览器都创建一个TableCell对象.
|
属性
|
描述
|
abbr |
设置或获取单元格的摘要 |
align |
设置或获取单元格中文字的水平对齐方向 |
axis |
设置或获取以逗号分隔的相关单元格组成的列表 |
cellIndex |
获取行单元格集合中某单元格的位置 |
ch |
设置或获取单元格的对齐特征 |
chOff |
设置或获取单元格的对齐偏移特征 |
colSpan |
设置或获取单元格跨越的表格列数 |
headers |
设置或获取以空格分表头单元格的id列表 |
height |
设置或获取单元格的高度 |
innerHTML |
设置或获取单元格标记间的HTML文本 |
noWrap |
设置或获取单元格是否自动换行 |
rowSpan |
设置或获取单元格跨越的表格行数 |
scope |
设置或获取与标题相关联的数据列 |
vAlign |
设置或获取单元格文字的垂直对齐方向 |
width |
设置或获取单元格的宽度 |
怎样获取预定义的table的行号和列号呢?很简单,只需要了解 table 的几个属性值用法即可。Table的总行数可以通过标记“tr” 得到,但是table的列数却不能直接获取,它需要借助 rows 通过标记“th” 和“td”得到。为了更直观,下面以示例来说明如何得到行号和列号。点击 Id 为 'MyTable' 的表格的任意单元时,返回该单元的行号和列号!示例代码如下:
function getRowAndColumn()
{
if(!document.getElementsByTagName || !document.createTextNode)return;
var rows=document.getElementById('MyTable').getElementsByTagName('tr');
var cols;
for(i = 0; i < rows.length; i++)
{
rows[i].onclick=function()
{
alert("行:"+eval(this.rowIndex + 1));
}
if(i=0)
{
colsTH =rows[i].getElementsByTagName('th');
alert(colsTH.length);
for(k = 0; k< colsTH.length; k++)
{
colsTH[k].onclick =function()
{
alert("列:"+eval(this.cellIndex +1));
}
}
}
else
{
cols =rows[i].getElementsByTagName('td');
for(j = 0; j < cols.length; j++)
{
cols[j].onclick =function()
{
alert("列:"+eval(this.cellIndex + 1));
}
}
}
}
}