JavaScript DOM操作表格及样式_基础知识

一 操作表格

标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它;

// 使用DOM来创建表格;
 var table = document.createElement('table');
 table.border = 1;
 table.width = 300;

 var caption = document.createElement('caption');
 table.appendChild(caption);
 caption.appendChild(document.createTextNode('人员表'));

 var thead = document.createElement('thead');
 table.appendChild(thead);

 var tr = document.createElement('tr');
 thead.appendChild(tr);

 var th1 = document.createElement('th');
 var th2 = document.createElement('th');

 tr.appendChild(th1);
 th1.appendChild(document.createTextNode('姓名'));
 tr.appendChild(th2);
 th2.appendChild(document.createTextNode('年龄'));

 document.body.appendChild(table);

// 表格较为复杂,层次也多,使用之前的DOM来获取某个元素会比较麻烦;推荐使用HTMLDOM;
HTMLDOM 属性和方法介绍
属性或方法 说明
caption 保存着

元素的HTMLCollection集合;
tFoot 保存着对元素的引用;
tHead 保存着对元素的引用;
rows 保存着对元素的HTMLCollection集合;
createTHead() 创建元素,并返回引用;
createTFoot() 创建元素,并返回引用;
createCpation() 创建元素;
deleteTFoot() 删除元素;
deleteCaption() 删除元素添加的属性和方法
rows 保存着元素中行的HTMLCollection;
deleteRow(pos) 删除指定位置的行;
insertRow(pos) 向rows集合中的指定位置插入一行;

元素添加的属性和方法
cells 保存着元素中单元格的HTMLCollectioin集合;
deleteCell(pos) 删除指定位置的单元格;
insertCell(pos) 向cells集合的指定位置插入一个单元格,并返回引用;

// HTMLDOM获取表格的

和是唯一的,只能有一个;
// 而不是唯一的,可以是多个,这样导致最后返回的和是元素引用;而是元素集合;

二 操作样式

CSS作为(X)HTML的辅助,可以增强页面的显示效果,但不是每个浏览器都能支持最新的CSS能力;
CSS的能力和DOM级别密切相关,所以需要检测当前浏览器的支持CSS能力的级别;
在HTML中定义样式的方式有3种:
(1).使用style特性定义针对特定元素的样式;
(2).使用

元素的引用;
tBodies 保存着

元素,并返回引用;
deleteTHead() 删除

元素;
deleteRow(pos) 删除指定的行;
insertRow(pos) 向rows集合中的指定位置插入一行;

alert(table.caption.innerHTML); // 获取caption的内容;

// PS:在一个表格中