javascript DOM操作表格的各种属性.
TableData 对象
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 |
下面看几个例子吧：
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” onclick=”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” onclick=”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” onclick=”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” onclick=”setColSpan()” value=”改变colspan值”>
</form>
</body>
</html>