JavaScript学习记录-DOM操作表格

之前有写过用HTML和JavaScript分别创建一个表格，JS创建表格非常繁琐，重复代码很多，又因为表格较为繁杂，层次也多，所以用DOM只是来获取某个元素会非常不便。因此，使用HTML DOM会清晰很多。

HTML DOM是HTML Document Object Model的缩写，HTML DOM则是专门适用于HTML/XHTML的文档对象模型。可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态地修改网页。

HTML DOM中，给这些元素标签提供了一些属性和方法：

元素的HTMLCollection集合

元素的引用

元素的引用

元素的HTMLCollection集合

元素，并返回引用

元素，并返回引用

元素

元素

元素的引用

元素，并返回引用

元素

属性或方法	说明
caption	保存着
tBodies	保存着
tFoot	保存着对
tHead	保存着对
rows	保存着对
createTHead()	创建
createTFoot()	创建
createCaption()	创建
deleteTHead()	删除
deleteTFoot()	删除
deleteCaption()	删除
deleteRow(pos)	删除指定的行
insertRow(pos)	向rows集合中的指定位置插入一行

元素添加的属性和方法：

元素中行的HTMLCollection

属性或方法	说明
rows	保存着
deleteRow(pos)	删除指定位置的行
insertRow(pos)	向rows集合中的指定位置插入一行，并返回引用

元素添加的属性和方法：

元素中单元格的HTMLCollection

属性或方法	说明
cells	保存着
deleteCell(pos)	删除指定位置的单元格
insertCell(pos)	向cells集合的指定位置插入一个单元格，并返回引用

操作表格

1、HTML DOM获取表格元素

window.onload=function(){
	var table=document.getElementsByTagName("table")[0];
	alert(table.children[0].innerHTML);
//等效于下一条
	alert(table.caption.innerHTML);	//获取caption的内容
	alert(table.tHead);	//获取表头
	alert(table.tFoot);	//获取表尾
	alert(table.tBodies);	//取表体的集合
}

在一个表格中和是唯一的，只能有一个。而不是唯一的可以有多个，这样导致最后返回的和是元素引用，而返回的是元素集合。

2、HTML DOM获取表格内容

window.onload=function(){
	var table=document.getElementsByTagName("table")[0];

	alert(table.rows.length);	//获取行数的集合，数量
	alert(table.tBodies[0].rows.length);	//获取主体的行数的集合，数量
	alert(table.tBodies[0].rows[0].cells.length);		//获取第一行单元格的数量
	alert(table.tBodies[0].rows[0].cells[0].innerHTML);	//获取第一行第一个单元格的内容
}

3、HTML DOM删除表格相关内容

window.onload=function(){
	var table=document.getElementsByTagName("table")[0];

	table.deleteCaption();						//删除标题
	table.deleteTHead();						//删除
	table.tBodies[0].deleteRow(0);				//删除一行
	table.tBodies[0].rows[0].deleteCell(0);		//删除一个单元格
}

4、HTML DOM创建表格

window.onload=function(){
	var table=document.createElement("table");
	table.border=1;
	table.width=300;

	table.createCaption().innerHTML="人员表";

	var thead=table.createTHead();
	var tr=thead.insertRow(0);
	tr.insertCell(0).innerHTML="姓名";
	tr.insertCell(1).innerHTML="性别";
	tr.insertCell(2).innerHTML="年龄";

	document.body.appendChild(table);
}