JavaScript DOM操作表格及样式

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

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

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

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

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

二 操作样式

CSS作为(X)HTML的辅助,可以增强页面的显示效果,但不是每个浏览器都能支持最新的CSS能力;
 CSS的能力和DOM级别密切相关,所以需要检测当前浏览器的支持CSS能力的级别;
 在HTML中定义样式的方式有3种:
 (1).使用style特性定义针对特定元素的样式;
 (2).使用<style/>元素定义嵌入式样式;
 (3).通过<link/>元素包含外部样式表文件;1 // DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力;
 DOM2增加了CSS编程访问方式和改变CSS样式信息;
 检测浏览器是否支持DOM1级CSS能力或DOM2级CSS能力
     alert('DOM1级CSS能力:'+document.implementation.hasFeature('CSS','2.0'));
     alert('DOM2级CSS能力:'+document.implementation.hasFeature('CSS2','2.0'));

1.访问元素的样式

(1).style特性/对象
// 任何HTML元素标签都会有一个通用的属性:style,它会返回CSSStyleDeclaration对象;
    CSS属性及JavaScript调用
CSS属性                 JavaScript调用
color                   style.color
font-size               style.fontSize
float                   style.cssFloat(非IE)
float                   style.styleFloat(IE)
    var box = document.getElementById('box');
    box.style;                              // CSSStyleDecaration;
    box.style.color;                        // red;
    box.style.fontSze;                      // 20px;
    // 兼容IE的float操作;
    typeof box.style.cssFloat != 'undefined' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right';