html table data,HTML DOM TableData用法及代码示例

HTML DOM中的TableData对象用于表示HTML td元素。可以使用getElementById()方法访问td元素。

用法:

要访问td元素：

document.getElementById("id");

创建td元素：

document.createElement("td");

TableData对象属性：

属性

描述

abbr

此属性用于设置或返回abbr属性的值。

align

此属性用于设置或返回数据单元中内容的水平对齐方式。

vAlign

此属性用于设置或返回单元格中内容的垂直对齐方式。

width

此属性用于设置或返回数据单元的宽度。

axis

此属性用于设置或返回相关数据单元格的逗号分隔列表。

background

此属性用于设置或返回数据单元格的背景图像。

bgColor

此属性用于设置或返回表格的背景色。

cellIndex

此属性用于返回表格行的单元格集合中单元格的位置。

ch

此属性用于设置或返回数据单元格的对齐字符。

chOff

此属性用于设置或返回ch属性的水平偏移量。

colSpan

此属性用于设置或返回colspan属性的值。

headers

此属性用于设置或返回headers属性的值。

height

此属性用于设置或返回数据单元格的高度。

noWrap

此属性用于设置或返回是否可以包装单元格中的内容。

rowSpan

此属性用于设置或返回rowspan属性的值。

示例1：访问表数据并添加新内容。

table,

th,

td {

border:1px solid green;

}

GeeksForGeeks

DOM TableData Object

Geeks

For

Geeks

Click the button to change the

text of the first td element.

Click Here!

function myFunction() {

//  Accessing Table data

var x =

document.getElementById("myTd");

x.innerHTML = "Add new content";

}

输出：

在单击按钮之前：

单击按钮后：

示例-2：使用document.createElement(“TD”);创建td元素。

table,

th,

td {

border:1px solid green;

}

GeeksForGeeks

DOM TableData Object

Click the button to create a td element.

Click Here!

function myFunction() {

//  Creating td element.

var x =

document.createElement("TD");

var t =

document.createTextNode("Hello Geeks!");

x.appendChild(t);

document.getElementById(

"myTr").appendChild(x);

}

输出：

在单击按钮之前：

单击按钮后：

注意：html5不支持大多数属性。