表格元素、表格行则另有添加子元素的方法。实际上,他们可以再添加子元素的同时创建这些子元素。也就是说,添表格子元素时,往往无须使用document的createElement()方法来创建节点。
HTMLTableElement对象有如下方法:
- insertRow(index):在index处插入一行。返回新创建的HTMLTableRowElement。
- createCaption():为该表格创建标题。返回创建的HTMLTableCaptionElement。如果该表格已有标题,则返回已有的标题对象。
- createTFoot():为该表格创建
<tfoot……/>
元素。返回新创建的HTMLTableFootElement。如果该表格已有<tfoot……/>
元素,则返回已有的<tfoot……/>
元素 - createTHead():为该表格创建
<thead……/>
元素。返回新创建的HTMLTableHeadElment。如果该表格已有<thead……/>
元素,则返回已有的<thead……/>
元素。
HTMLTableRowElement对象代表表格行,该对象包含如下方法用于插入表格。
- insertCell(index):在index处创建一个单元格,返回新创建的单元格。
下面通过脚本在页面中动态生成一个表格。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<title>动态添加表格内容</title>
</head>
<body id='test'>
<script type="text/javascript">
var a = document.createElement("table");
a.style.width = "800px";
a.style.borderCollapse = "collapse";
a.border = 1;
//为表格创建标题
var caption = a.createCaption();
caption.innerHTML = "这是一首简单的小情歌";
//为表格循环插入5行
for(var i = 0;i<5;i++){
//插入行
var tr = a.insertRow(i);
//为每行插入7列
for(var j=0;j<7;j++){
//村换插入插入7列
var td = tr.insertCell(j);
td.style.padding = "5px";
//设置每个单元格的内容
td.innerHTML = "小情歌"+i+j;
}
}
document.getElementById("test").appendChild(a);
</script>
</body>
</html>
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
如上图的表格结构为HTMLTableElement–>HTMLRowElement–>HTMLCellElement。每个表格元素包含若干包含若干个表格行子节点,每个表格行节点又包含若干个单元格子节点。整个表格看起来其实就是个DOM树。