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

来源：互联网发布：mlb淘宝代购是真的吗编辑：程序博客网时间：2024/06/05 08:04

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

TableData 对象方法

Method 方法 Description 描述 IE F N W3Cblur()Removes focus from the table cell 取消表格单元的焦点4 Noclick()Simulates a mouse-click on the table cell 模仿鼠标对表格单元的点击4 Nofocus()Sets focus on the table cell 为表格单元设置焦点4 No

TableData 对象事件

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

Event 事件 Description 描述 IE F N W3ConBlurExecutes some code when the table cell loses focus 当表格单元失去焦点的时候执行一些代码4 onClickExecutes some code when the user clicks on the table cell 当用户点击表格单元的时候执行一些代码4 onFocusExecutes some code when the table cell gets focus 当表格单元得到检点的时候执行一些代码4 onSelectStartExecutes 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" 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>

0 0