judyge

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 保存着元素的引用;
tBodies 保存着元素的HTMLCollection集合;
tFoot 保存着对元素的引用;
tHead 保存着对元素的引用;
rows 保存着对元素的HTMLCollection集合;
createTHead() 创建元素,并返回引用;
createTFoot() 创建元素,并返回引用;
createCpation() 创建元素,并返回引用;
deleteTHead() 删除元素;
deleteTFoot() 删除元素;
deleteCaption() 删除元素;
deleteRow(pos) 删除指定的行;
insertRow(pos) 向rows集合中的指定位置插入一行;

元素添加的属性和方法
rows 保存着元素中行的HTMLCollection;
deleteRow(pos) 删除指定位置的行;
insertRow(pos) 向rows集合中的指定位置插入一行;

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

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

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

二操作样式

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