table row设置cell的html,HTML DOM TableRow用法及代码示例

HTML DOM中的TableRow对象用于表示HTML

元素。可以使用getElementById()方法访问元素。

用法:

document.getElementById("id");

可以使用document.createElement()方法创建tr元素。

用法:

document.createElement("tr");

属性值：

align:它用于设置或返回表行中内容的水平对齐方式。 HTML 5不支持它。

vAlign:它用于设置或返回表行中内容的垂直对齐方式。 HTML 5不支持它。

bgColor:它用于设置或返回表格行的背景色。 HTML 5不支持它。

ch:它用于设置或返回表格行中单元格的对齐字符。 HTML 5不支持它。

chOff:它用于设置或返回ch属性的水平偏移量。 HTML 5不支持它。

height:它用于设置或返回表格行的高度。 HTML 5不支持它。

rowIndex:它用于返回行在表的行集合中的位置。

sectionRowIndex:它用于返回一行在肢体，小脚或脚的行集合中的位置。

TableRow对象方法：

deleteCell()：此方法用于从当前表行中删除单元格。

insertCell()：此方法用于将单元格插入当前表行。

范例1：本示例描述了用于访问

元素的getElementById()方法。

table, th, td {

border:1px solid green;

}

GeeksForGeeks

HTML DOM tableRow Object

Geeks

Geeks

For

Geeks

Click on the button to delete

cell of table

Click Here!

function myGeeks() {

var row = document.getElementById("GFG");

row.deleteCell(0);

}

输出：

在单击按钮之前：

单击按钮后：

范例2：本示例介绍了用于创建

元素的document.createElement()方法。

HTML DOM TableRow Object

table, td {

border:1px solid green;

}

GeeksForGeeks

DOM tableRow Object

Click on the button to create

table element.

Click Here!

function myGeeks() {

/* Create tr element */

var x = document.createElement("TR");

/* Set the id attribute */

x.setAttribute("id", "GeeksTr");

/* Append element to table */

document.getElementById("GeeksTable").appendChild(x);

/* Create td element */

var y = document.createElement("TD");

var t = document.createTextNode("Hello");

y.appendChild(t);

document.getElementById("GeeksTr").appendChild(y);

/* Create td element */

var z = document.createElement("TD");

/* Assign node value */

var p = document.createTextNode("Geeks!");

/* Append node value to child element */

z.appendChild(p);

document.getElementById("GeeksTr").appendChild(z);

}

输出：

在单击按钮之前：

单击按钮后：