DOM操作表格的各种属性

最新推荐文章于 2023-06-10 16:24:42 发布

ukeychen

最新推荐文章于 2023-06-10 16:24:42 发布

阅读量1.9k

点赞数

分类专栏： AJAX JavaScript DOM 文章标签： table alignment html border button character

JavaScript 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

AJAX

9 篇文章 0 订阅

订阅专栏

DOM

8 篇文章 0 订阅

订阅专栏

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	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	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
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>

</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>

</html>

3，修改单元格的内容

<html>
<head>
<script type="text/javascript">
function changeContent()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].innerHTML="POP"
}
</script>
</head>

</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>

</html>

ukeychen

关注

0
点赞
踩
0

收藏

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

TableData 对象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元素。每当文档中出现标签，就有TableDa
复制链接

扫一扫