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>