The TableData object represents an HTML table data element. For each instance of an HTML <td> tag in a document, a TableData object is created. TableDate对象代表了HTML表格的data元素。每当文档中出现<yd>标签，就有TableData对象被建立起来

IE: Internet Explorer, F:Firefox,N:Netscape,W3C: World Wide Web Consortium (Internet Standard).

TableData 对象属性

Property 属性 Description 描述 IE  F N W3C

abbr Sets or returns an abbreviated text for the table cell (for non-visual media such as speech or Braille) 设置或返回表格单元格的缩写文字（针对那些非视觉化的媒介） 6     Yes
accessKey Sets or returns the keyboard key to access the table cell 设置或返回表格单元的快速访问键 4     No
align Sets or returns the horizontal alignment of data within the table cell 设置或返回在表格单元内数据的水平对齐方式 4     Yes
axis Sets or returns a comma-delimited list of related table cells (categories) 6     Yes
background Sets or returns the background image for the table cell 为表格单元设置或返回它的背景图片 4     No
bgColor Sets or returns the background color for the table cell 为表格单元设置或返回它的背景颜色 4     Yes
borderColor Sets or returns the border color of the table cell 设置或返回表格单元的边框颜色 4     No
cellIndex Returns the position of the cell in the cells collection of a row 返回在行中单元集合中单元的位置 4     Yes
ch Sets or returns the alignment character for the table cell 设置或返回表格单元的对齐特征 6     Yes
chOff Sets or returns the offset of alignment character for the table cell 设置或获取可用于实现对象的你自己的 chOff 功能的字符串。 6     Yes
colSpan Sets or returns the number of columns the table cell should span 设置或获取对象应该跨越的表格列数。 4     Yes
disabled Sets or returns whether or not the table cell should be disabled 设置或获取控件的状态。 5     No
headers Sets or returns a list of space-separated header cell ids 设置或获取为对象提供信息的标题单元格。 6     Yes
height Sets or returns the height of the table cell 获取或折纸表格单元的工作区域高度 4     No
id Sets or returns the id of the table cell (In IE 4 this property is read-only) 设置或返回表格单元的id 4     No
innerHTML Sets or returns the HTML between the start and end tags of the table cell 设置或返回在表格单元标签之间的HTML内容 4     No
innerText Sets or returns the text between the start and end tags of the table cell 设置或返回在表格单元标签之间的文字内容 4     No
noWrap Sets or returns a Boolean value indicating whether or not the browser automatically performs word wrap in the table cell 设置或获取浏览器是否执行表格单元内的自动换行。[布尔值] 4     Yes
outerHTML Sets or returns the table data object and its content in HTML 设置或获取表格单元对象及其内容的 HTML 形式。 4     No
outerText Sets or returns the text of the table data object 设置或获取表格单元对象的文本。 4     No
rowSpan Sets or returns the number of rows the table cell should span 设置或获取单元格要跨越表格的多少行。 4     Yes
scope   6     Yes
tabIndex Sets or returns the tab order for the table cell 设置或获取定义对象的 Tab 顺序的索引。 4     No
vAlign Sets or returns how cell content are vertically aligned 设置或获取标题是表格的上面还是下面。 4     Yes
width Sets or returns the width of the table cell 设置或获取表格单元的宽度 4     Yes

TableData 对象方法

Method 方法 Description 描述 IE F N W3C

blur() Removes focus from the table cell 取消表格单元的焦点 4     No
click() Simulates a mouse-click on the table cell 模仿鼠标对表格单元的点击 4     No
focus() Sets focus on the table cell 为表格单元设置焦点 4     No

TableData 对象事件

Syntax: object.event_name="someJavaScriptCode" 语法：对象.事件名称=“一些JS代码”

Event 事件 Description 描述 IE F N W3C

onBlur Executes some code when the table cell loses focus 当表格单元失去焦点的时候执行一些代码 4      
onClick Executes some code when the user clicks on the table cell 当用户点击表格单元的时候执行一些代码 4      
onFocus Executes some code when the table cell gets focus 当表格单元得到检点的时候执行一些代码 4      
onSelectStart Executes some code when the table cell is selected 当表格单元被选中的时候执行一些代码 4      
js 代码
  1. 下面看几个例子吧：
  2. 1，插入单元格
  3. <html>
  4. <head>
  5. <script type="text/javascript">
  6. function addCell()
  7. {
  8. var x=document.getElementById('myTable').rows[0]
  9. var y=x.insertCell(2)
  10. y.innerHTML="新单元格"
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <table id="myTable" border="1">
  16. <tr>
  17. <td>行1 单元格1</td>
  18. <td>行1 单元格2</td>
  19. </tr>
  20. <tr>
  21. <td>行2 单元格1</td>
  22. <td>行2 单元格2</td>
  23. </tr>
  24. <tr>
  25. <td>行3 单元格1</td>
  26. <td>行3 单元格2</td>
  27. </tr>
  28. </table>
  29. <form>
  30. <input type="button" οnclick="addCell()" value="添加新的单元格">
  31. </form>
  32. </body>
  33. </html>
  34. 2，对表格行里单元格的内容进行对齐
  35. <html>
  36. <head>
  37. <script type="text/javascript">
  38. function alignRow()
  39. {
  40. var x=document.getElementById('myTable').rows
  41. x[0].align="right"
  42. x[0].valign="top"
  43. }
  44. </script>
  45. </head>
  46. <body>
  47. <table width="60%" id="myTable" border="1">
  48. <tr>
  49. <td>行1 单元格1</td>
  50. <td>行1 单元格2</td>
  51. </tr>
  52. <tr>
  53. <td>行2 单元格1</td>
  54. <td>行2 单元格2</td>
  55. </tr>
  56. <tr>
  57. <td>行3 单元格1</td>
  58. <td>行3 单元格2</td>
  59. </tr>
  60. </table>
  61. <form>
  62. <input type="button" οnclick="alignRow()" value="右对齐第一行文字">
  63. </form>
  64. </body>
  65. </html>
  66. 3，修改单元格的内容
  67. <html>
  68. <head>
  69. <script type="text/javascript">
  70. function changeContent()
  71. {
  72. var x=document.getElementById('myTable').rows[0].cells
  73. x[0].innerHTML="POP"
  74. }
  75. </script>
  76. </head>
  77. <body>
  78. <table id="myTable" border="1">
  79. <tr>
  80. <td>行1 单元格1</td>
  81. <td>行1 单元格2</td>
  82. </tr>
  83. <tr>
  84. <td>行2 单元格1</td>
  85. <td>行2 单元格2</td>
  86. </tr>
  87. <tr>
  88. <td>行3 单元格1</td>
  89. <td>行3 单元格2</td>
  90. </tr>
  91. </table>
  92. <form>
  93. <input type="button" οnclick="changeContent()" value="改变第一个单元格文字">
  94. </form>
  95. </body>
  96. </html>
  97. 4，改变表格行的colspan属性值
  98. <html>
  99. <head>
  100. <script type="text/javascript">
  101. function setColSpan()
  102. {
  103. var x=document.getElementById('myTable').rows[0].cells
  104. x[0].colSpan="2"
  105. x[1].colSpan="6"
  106. }
  107. </script>
  108. </head>
  109. <body>
  110. <table id="myTable" border="1">
  111. <tr>
  112. <td colspan="4">单元格1</td>
  113. <td colspan="4">单元格2</td>
  114. </tr>
  115. <tr>
  116. <td>单元格3</td>
  117. <td>单元格4</td>
  118. <td>单元格5</td>
  119. <td>单元格6</td>
  120. <td>单元格7</td>
  121. <td>单元格8</td>
  122. <td>单元格9</td>
  123. <td>单元格10</td>
  124. </tr>
  125. </table>
  126. <form>
  127. <input type="button" οnclick="setColSpan()" value="改变colspan值">
  128. </form>
  129. </body>
  130. </html>

DOM操作表格的各种属性[z]相关推荐

  1. dom操作表格示例(dom创建表格)

    一.使用HTML标签创建表格: 复制代码 代码如下: <tableborder="1"width="300"> <caption>人员表 ...

  2. js如何操作表格（常用属性方法汇总）

    js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...

  3. html DOM操作表格及样式

    一 操作表格 // <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 // 使用DOM来创建表格; 2     var t ...

  4. JavaScript DOM操作表格及样式

    一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  5. DOM—操作元素（获取属性值、设置属性值、 移除属性）

    1. 自定义属性的操作 1.1 获取属性值 element . 属性     获取属性值:(元素本身自带的属性) element . getAttribute( ' 属性 ' ):(主要获取自定义的属 ...

  6. 04-前端技术_ javaScript内置对象与DOM操作

    目录 五,javaScript内置对象与DOM操作 1,JavaScript对象定义和使用 2,JavaScript内置对象 2.1 Array数组 2.1.1 创建方式 2.1.2 常用属性: 2. ...

  7. JS基础知识篇-DOM操作总结

    目录 DOM-Document Object Model 文档对象模型 第一部分:Dom获取元素 第二部分:DOM属性设置与获取 第三部分:事件(鼠标事件.键盘事件.表单事件) DOM-Documen ...

  8. day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、 正则表达式

    回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...

  9. DOM操作之属性和样式操作

    在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...

最新文章

  1. Java线程面试题 Top 50(转)
  2. python assert 断言的作用
  3. Django之session验证的三种姿势
  4. 容器源码解析之HashMap(七)
  5. mysql允许所有用户连接_Mysql权限控制 - 允许用户远程连接
  6. linux mod_ssl源码安装,linux下不重新编译apache添加安装mod_ssl模块和错误的处理方法...
  7. js获取当前时区GMT
  8. kvm网卡虚拟化之vdpa技术
  9. 基本排序算法[python实现]
  10. mie散射理论方程_散射，原子分子散射
  11. 介绍几个flash游戏框架
  12. GdiPlus[45]: IGPGraphics (四) 关于呈现质量与合成模式
  13. Go Playground exercise
  14. 提高软件CPU占用率
  15. linux系统处理excel,Apache POI处理Excel文档
  16. 嫡权法赋权法_客观赋权法的使用
  17. mysql用户主机设置密码_MySQL用户账号管理（添加、删除、限制、设置密码、远程访问）...
  18. 冷暖自知——“2016中国创投市场分析报告”解读
  19. Python-定时爬取指定城市天气(一)-发送给关心的微信好友
  20. Linux的常用命令有哪些？

热门文章

  1. 【Android Gradle 插件】Module 目录下 build.gradle 配置文件 ( android 闭包块配置 | AppExtension 扩展类型参考文档 )
  2. 【Groovy】集合遍历 ( 使用集合的 collect 循环遍历集合并根据指定闭包规则生成新集合 | 代码示例 )
  3. 小程序中自定义头部标题栏
  4. freeswitch模块之event_socket
  5. ASP.NET Core 中文文档 第四章 MVC（2.2）模型验证
  6. Loadrunner 8.1 下载
  7. movsb movsw movsd 指令详解
  8. 汇编语言随笔（16）- 对磁盘进行读写（int 13h 中断例程）和实验 17
  9. 进行直播间搭建时需要注意的小细节
  10. AOP实现Android集中式登录架构