JS对象之Table表格对象

转自：http://chbin95233.blog.163.com/blog/static/32075111200991395943689/

 

http://www.ccscript.cn/Content/2/164.aspx 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));

                                  }

                            }

                     }

             }

       }