欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

DOM操作表格的各种属性[z]

发布时间：2025/6/15 编程问答 38 豆豆
生活随笔 收集整理的这篇文章主要介绍了 DOM操作表格的各种属性[z] 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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，插入单元格   
  •   
  • <html>   
  • <head>   
  • <script type="text/javascript">   
  • function addCell()   
  • {   
  • var x=document.getElementById('myTable').rows[0]   
  • var y=x.insertCell(2)   
  • y.innerHTML="新单元格"  
  • }   
  • </script>   
  • </head>   
  •   
  • <body>   
  • <table id="myTable" border="1">   
  • <tr>   
  • <td>行1 单元格1</td>   
  • <td>行1 单元格2</td>   
  • </tr>   
  • <tr>   
  • <td>行2 单元格1</td>   
  • <td>行2 单元格2</td>   
  • </tr>   
  • <tr>   
  • <td>行3 单元格1</td>   
  • <td>行3 单元格2</td>   
  • </tr>   
  • </table>   
  • <form>   
  • <input type="button" οnclick="addCell()" value="添加新的单元格">   
  • </form>   
  • </body>   
  •   
  • </html>   
  •   
  • 2，对表格行里单元格的内容进行对齐   
  •   
  • <html>   
  • <head>   
  • <script type="text/javascript">   
  • function alignRow()   
  • {   
  • var x=document.getElementById('myTable').rows   
  • x[0].align="right"  
  • x[0].valign="top"  
  • }   
  • </script>   
  • </head>   
  •   
  • <body>   
  • <table width="60%" id="myTable" border="1">   
  • <tr>   
  • <td>行1 单元格1</td>   
  • <td>行1 单元格2</td>   
  • </tr>   
  • <tr>   
  • <td>行2 单元格1</td>   
  • <td>行2 单元格2</td>   
  • </tr>   
  • <tr>   
  • <td>行3 单元格1</td>   
  • <td>行3 单元格2</td>   
  • </tr>   
  • </table>   
  • <form>   
  • <input type="button" οnclick="alignRow()" value="右对齐第一行文字">   
  • </form>   
  • </body>   
  •   
  • </html>   
  •   
  • 3，修改单元格的内容   
  •   
  • <html>   
  • <head>   
  • <script type="text/javascript">   
  • function changeContent()   
  • {   
  • var x=document.getElementById('myTable').rows[0].cells   
  • x[0].innerHTML="POP"  
  • }   
  • </script>   
  • </head>   
  •   
  • <body>   
  • <table id="myTable" border="1">   
  • <tr>   
  • <td>行1 单元格1</td>   
  • <td>行1 单元格2</td>   
  • </tr>   
  • <tr>   
  • <td>行2 单元格1</td>   
  • <td>行2 单元格2</td>   
  • </tr>   
  • <tr>   
  • <td>行3 单元格1</td>   
  • <td>行3 单元格2</td>   
  • </tr>   
  • </table>   
  • <form>   
  • <input type="button" οnclick="changeContent()" value="改变第一个单元格文字">   
  • </form>   
  • </body>   
  •   
  • </html>   
  •   
  • 4，改变表格行的colspan属性值   
  •   
  • <html>   
  • <head>   
  • <script type="text/javascript">   
  • function setColSpan()   
  • {   
  • var x=document.getElementById('myTable').rows[0].cells   
  • x[0].colSpan="2"  
  • x[1].colSpan="6"  
  • }   
  • </script>   
  • </head>   
  •   
  • <body>   
  • <table id="myTable" border="1">   
  • <tr>   
  • <td colspan="4">单元格1</td>   
  • <td colspan="4">单元格2</td>   
  • </tr>   
  • <tr>   
  • <td>单元格3</td>   
  • <td>单元格4</td>   
  • <td>单元格5</td>   
  • <td>单元格6</td>   
  • <td>单元格7</td>   
  • <td>单元格8</td>   
  • <td>单元格9</td>   
  • <td>单元格10</td>   
  • </tr>   
  • </table>   
  • <form>   
  • <input type="button" οnclick="setColSpan()" value="改变colspan值">   
  • </form>   
  • </body>   
  •   
  • </html>   

    • 总结

    以上是生活随笔为你收集整理的DOM操作表格的各种属性[z]的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。