兴化yj

JavaScript的DOM操作表格及样式

DOM 在操作生成HTML 上，还是比较简明的。不过，由于浏览器总是存在兼容和陷阱，
导致最终的操作就不是那么简单方便了。本章主要了解一下DOM 操作表格和样式的一些知
识。

一．操作表格

标签是HTML 中结构最为复杂的一个，我们可以通过DOM 来创建生成它，或
者HTML DOM 来操作它。(PS：HTML DOM 提供了更加方便快捷的方式来操作HTML，有
手册)。

   
   
   
   
    
    
    
    //需要操作的table 
    
    
    
    <table border="1" width="300"> 
    
    
    
    <caption>人员表caption> 
    
    
    
    <thead> 
    
    
    
    <tr> 
    
    
    
    <th>姓名th> 
    
    
    
    <th>性别th> 
    
    
    
    <th>年龄th> 
    
    
    
    tr> 
    
    
    
    thead> 
    
    
    
    <tbody> 
    
    
    
    <tr> 
    
    
    
    <td>张三td> 
    
    
    
    <td>男td> 
    
    
    
    <td>20td> 
    
    
    
    tr> 
    
    
    
    <tr> 
    
    
    
    <td>李四td> 
    
    
    
    <td>女td> 
    
    
    
    <td>22td> 
    
    
    
    tr> 
    
    
    
    tbody> 
    
    
    
    <tfoot> 
    
    
    
    <tr> 
    
    
    
    <td colspan="3">合计：Ntd> 
    
    
    
    tr> 
    
    
    
    tfoot> 
    
    
    
    table>

   
   
   
   
    
    
    
    //使用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'); 
    
    
    
    var th3 = document.createElement('th'); 
    
    
    
    tr.appendChild(th1); 
    
    
    
    th1.appendChild(document.createTextNode('姓名')); 
    
    
    
    tr.appendChild(th2); 
    
    
    
    th2.appendChild(document.createTextNode('年龄')); 
    
    
    
    document.body.appendChild(table);

PS：使用DOM 来创建表格其实已经没有什么难度，就是有点儿小烦而已。下面我们再
使用HTML DOM 来获取和创建这个相同的表格。

PS：因为表格较为繁杂，层次也多，在使用之前所学习的DOM 只是来获取某个元素会
非常难受，所以使用HTML DOM 会清晰很多。

   
   
   
   
    
    
    
    //使用HTML DOM 来获取表格元素 
    
    
    
    var table = document.getElementsByTagName('table')[0]; //获取table 引用 
    
    
    
    //按照之前的DOM 节点方法获取

、

alert(table.tHead); //获取表头

alert(table.tFoot); //获取表尾

//按HTML DOM 来获取表体

alert(table.tBodies); //获取表体的集合

PS：在一个表格中

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

   
   
   
   
    
    
    
    //按HTML DOM 来获取表格的行数 
    
    
    
    alert(table.rows.length); //获取行数的集合，数量 
    
    
    
    //按HTML DOM 来获取表格主体里的行数 
    
    
    
    alert(table.tBodies[0].rows.length); //获取主体的行数的集合，数量 
    
    
    
    //按HTML DOM 来获取表格主体内第一行的单元格数量(tr) 
    
    
    
    alert(table.tBodies[0].rows[0].cells.length); //获取第一行单元格的数量 
    
    
    
    //按HTML DOM 来获取表格主体内第一行第一个单元格的内容(td) 
    
    
    
    alert(table.tBodies[0].rows[0].cells[0].innerHTML); //获取第一行第一个单元格的内容 
    
    
    
    //按HTML DOM 来删除标题、表头、表尾、行、单元格 
    
    
    
    table.deleteCaption(); //删除标题 
    
    
    
    table.deleteTHead(); //删除

table.tBodies[0].deleteRow(0); //删除

一行

table.tBodies[0].rows[0].deleteCell(0); //删除

alert(table.children[0].innerHTML); //获取caption 的内容

PS：这里使用了children[0]本身就忽略了空白，如果使用firstChild 或者childNodes[0]
需要更多的代码。

   
   
   
   
    
    
    
    //按HTML DOM 来获取表格的

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

//按HTML DOM 来获取表头表尾

一个单元格

//按HTML DOM 创建一个表格

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

table.border = 1;

table.width = 300;

table.createCaption().innerHTML = '人员表';

//table.createTHead();

//table.tHead.insertRow(0);

var thead = table.createTHead();

var tr = thead.insertRow(0);

var td = tr.insertCell(0);

td.appendChild(document.createTextNode('数据'));

var td2 = tr.insertCell(1);

td2.appendChild(document.createTextNode('数据2'));

document.body.appendChild(table);

PS：在创建表格的时候

、、

没有特定的方法，需要使用document
来创建。也可以模拟已有的方法编写特定的函数即可，例如：insertTH()之类的。

二．操作样式
CSS 作为(X)HTML 的辅助，可以增强页面的显示效果。但不是每个浏览器都能支持最
新的CSS 能力。CSS 的能力和DOM 级别密切相关，所以我们有必要检测当前浏览器支持
CSS 能力的级别。
DOM1 级实现了最基本的文档处理，DOM2 和DOM3 在这个基础上增加了更多的交互
能力，这里我们主要探讨CSS，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'));

PS：这种检测方案在IE 浏览器上不精确，IE6 中，hasFeature()方法只为HTML 和版本
1.0 返回true，其他所有功能均返回false。但IE 浏览器还是支持最常用的CSS2 模块。
1.访问元素的样式
任何HTML 元素标签都会有一个通用的属性：style。它会返回CSSStypeDeclaration 对
象。下面我们看几个最常见的行内style 样式的访问方式。

   
   
   
   
    
    
    
    var box = document.getElementById('box'); //获取box 
    
    
    
    box.style.cssFloat.style; //CSSStyleDeclaration 
    
    
    
    box.style.cssFloat.style.color; //red 
    
    
    
    box.style.cssFloat.style.fontSize; //20px 
    
    
    
    box.style.cssFloat || box.style.styleFloat; //left，非IE 用cssFloat，IE 用styleFloat

PS：以上取值方式也可以赋值，最后一种赋值可以如下：

   
   
   
   
    
    
    
    typeof box.style.cssFloat != 'undefined' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right';

   
   
   
   
    
    
    
    box.style.cssText; //获取CSS 代码 
    
    
    
    //box.style.length; //3，IE 不支持 
    
    
    
    //box.style.removeProperty('color'); //移除某个CSS 属性，IE 不支持 
    
    
    
    //box.style.setProperty('color','blue'); //设置某个CSS 属性，IE 不支持

PS：Firefox、Safari、Opera9+、Chrome 支持这些属性和方法。IE 只支持cssText，而
getPropertyCSSValue()方法只有Safari3+和Chrome 支持。
PS：style 属性仅仅只能获取行内的CSS 样式，对于另外两种形式内联