之前有写过用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);
}