javascript的table 对象 属性 方法

javascript的table 对象 属性 方法

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].οnclick=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));

                                  }

                            }

                     }

             }

       }


转载于:http://hi.baidu.com/laogao3232/item/50fc2d2949f1cdf950fd875c

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code 1 2 3 4 给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如: Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点。 程序第一步就是克隆原table: this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不了样式了。 克隆之后再设置样式: this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果,但table比较特别,测试下面的代码: Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值