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中，给这些元素标签提供了一些属性和方法：

属性或方法	说明
caption	保存着<caption>元素的引用
tBodies	保存着<tbody>元素的HTMLCollection集合
tFoot	保存着对<tfoot>元素的引用
tHead	保存着对<thead>元素的引用
rows	保存着对<tr> 元素的HTMLCollection集合
createTHead()	创建<thead>元素，并返回引用
createTFoot()	创建<tfoot>元素，并返回引用
createCaption()	创建<caption>元素，并返回引用
deleteTHead()	删除<thead>元素
deleteTFoot()	删除<tfoot>元素
deleteCaption()	删除<caption>元素
deleteRow(pos)	删除指定的行
insertRow(pos)	向rows集合中的指定位置插入一行

<tbody>元素添加的属性和方法：

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

<tr>元素添加的属性和方法：

属性或方法	说明
cells	保存着<tr>元素中单元格的HTMLCollection
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);	//取表体的集合
}

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

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();						//删除<thead>
	table.tBodies[0].deleteRow(0);				//删除<tr>一行
	table.tBodies[0].rows[0].deleteCell(0);		//删除<td>一个单元格
}

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);
}