HTML DOM常用对象

HTML DOM Table 对象

一、Table 对象属性

1、border：可以设置或返回表格边框的宽度（以像素为单位）；
2、caption：设置或返回表格的caption元素；
3、cellPadding：设置或返回单元格边框与单元格内容之间的空白量（以像素为单位）；
4、cellSpacing：设置或返回表格中的单元格之间的空白量（以像素为单位）；
5、frame：设置或返回表格的外部边框；
6、id：设置或返回表格的id；
7、rules：设置或返回表格的内部边框；
8、summary：设置或返回对表格的描述；
9、width：设置或返回表格的宽度；

二、Table 对象集合

1、cells[]：返回表格中所有单元格的一个数组；
2、rows[]：返回表格中所有行的一个数组；包括 thead、tfoot 和 tbody标签 中定义的所有行；
3、tBodies[]：返回包含表格中所有tbody的一个数组；

三、Table 对象方法

1、创建行分组 createXXX()
createTHead、createTBody、createTFoot；
2、删除行分组 deleteXXX()
deleteTHead()、deleteTFoot；
3、获得行分组 table.tHead
特殊：
tBody 一个table中可以包含多个tbody；
获得： table.tBodies[i]；
删除：table无法删除tbody；
4、行分组：
创建： insertRow(i)， insertRow()表示末尾追加一行；
删除：每一行tr都有tr.rowIndex，记录了tr在整个表中的下标
ex: thead.deleteRow(i)、tbody.delelteRow(i)、table.deleteRow(i)；
获取行： .rows；
5、单元格：
添加：无法添加th
.insertCell(i)；
删除单元格：
.deleteCell(i)；
获取格：
.cells；

用js创建一个简单表格

//要添加的数据
var data =[
	{"id":"1001","name":"张三","sex":"男","age":25},
	{"id":"1002","name":"李四","sex":"女","age":22},
	{"id":"1003","name":"王五","sex":"男","age":28},
]
//首先创建一个table
var table = document.createElement("table");
//在table上添加thead
var thead = table.createTHead();
//在thead上添加天tr
var tr = thead.insertRow();
//制作表头
//遍历数组的第一行的每一个属性
for(var key in data[0]){
	// 创建单元格并添加数据
	tr.insertCell().innerHTML = key;
}
//在table中添加tbody存放数据
var tbody = table.createTBody();
//遍历data数组中的数据并放在对应的每一行中
for(var i = 0;i < data.length;i++){
	//在tbody中添加tr
	var tr = tbody.insertRow();
	//遍历data数组当前行的每一个属性
	for(var key in data[i]){
		// 创建单元格并添加数据
		tr.insertCell().innerHTML = data[i][key];
	}
}
//把table添加到页面中
document.body.appendChild(table);