HTML DOM Column 对象

HTML DOM Column对象

简介

HTML DOM Column 对象是指在HTML中Table中的Column。每一列由HTMLTableColElement 对象表示。Column 对象的主要作用是为了访问和操作HTML表格中的列。

使用方法

使用Column对象主要是通过获取HTMLTableColElement对象，通过它来操作Column。

获取Column对象

获取HTMLTableColElement 对象可以使用下列两种方式：

• 通过HTML元素ID获取：

var x = document.getElementById("myCol");
var table = x.parentNode.parentNode.parentNode; // 获取父类table对象。
var colIndex = x.cellIndex; // 获取Table中列索引。
var rows = table.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
  var currentCell = rows[i].getElementsByTagName("td")[colIndex];
}

• 直接获取Table中column对象：

var col = myTableElement.column[index]; 

它们都是返回 HTMLTableColElement 对象。获取HTMLTableColElement对象后，就可以使用HTMLTableColElement的属性和方法。

Column 属性

列对象有下面列出的属性：

• width: 返回或设置列的宽度。
• span: 返回或设置列组中列的数量。
• align: 返回或设置列中内容的水平对齐方式 （left、right 或 center）。
• ch: 返回或设置列中内容的对齐字符。
• chOff: 返回或设置列中内容的对齐字符偏移量。
• vAlign: 返回或设置列中内容的垂直对齐方式 (top、middle 或 bottom)。

Column 方法

• createCaption(): 在表格中创建一个新的脚注。
• deleteCaption(): 从表格中删除脚注。
• createTHead(): 在表格中创建一个新的标题部分。
• deleteTHead(): 从表格中删除标题部分。
• createTFoot(): 在表格中创建一个新的页脚部分。
• deleteTFoot(): 从表格中删除页脚部分。
• insertRow(index)：在指定列的下一行插入新行。
• deleteRow(index)：从表格中删除行。

注意事项

• HTML DOM Column 对象不能直接用于修改表格的内容。对表格中内容的修改需要通过修改标签（Cell）进行操作。

结语

HTML DOM Column 对象主要是为了访问和操作HTML表格中的列。通过获取HTMLTableColElement 对象，就可以使用 HTMLTableColElement 的属性和方法。除此之外，还需要注意使用上述属性和方法时的注意事项。