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

最新推荐文章于 2022-04-27 10:05:28 发布

judyge

最新推荐文章于 2022-04-27 10:05:28 发布

阅读量335

点赞数

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章 5 订阅

订阅专栏

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>

judyge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作表格的各种属性[z]

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

扫一扫