weixin_33949359
weixin_33949359

JavaScript DOM操作表格及样式


一．操作表格

标签是HTML中结构最为复杂的一个，可以通过DOM来创建生成它（比较麻烦），或者HTML DOM来操作它。

//需要操作的table

合计：N

人员表
姓名 性别 年龄
汤高 男 20
汤小高 男 18

 

//使用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);

 

使用DOM来创建表格比较麻烦。可以使用HTML DOM来获取和创建这个相同的表格。

 

HTML DOM中，给这些元素标签提供了一些属性和方法

元素的HTMLCollection集合

元素的引用

元素的引用

 元素的HTMLCollection集合

元素，并返回引用

元素，并返回引用

元素

元素

属性或方法

说明

caption

保存着

元素的引用

tBodies

保存着

tFoot

保存着对

tHead

保存着对

rows

保存着对

createTHead()

创建

createTFoot()

创建

createCaption()

创建

元素，并返回引用

deleteTHead()

删除

deleteTFoot()

删除

deleteCaption()

删除

元素

deleteRow(pos)

删除指定的行

insertRow(pos)

向rows集合中的指定位置插入一行

 

元素添加的属性和方法

元素中行的HTMLCollection

属性或方法

说明

rows

保存着

deleteRow(pos)

删除指定位置的行

insertRow(pos)

向rows集合中的指定位置插入一行，并返回引用

 

元素添加的属性和方法

元素中单元格的HTMLCollection

属性或方法

说明

cells

保存着

deleteCell(pos)

删除指定位置的单元格

insertCell(pos)

向cells集合的指定位置插入一个单元格，并返回引用

 

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

 

//使用HTML DOM来获取表格元素

var table = document.getElementsByTagName('table')[0];//获取table引用

 

//按照之前的DOM节点方法获取

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

 

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

 

//按HTML DOM来获取表格的

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

 

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

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

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

 

//按HTML DOM来获取表体

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

 

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

 

//按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);//删除一个单元格

 

//按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);

 

注意：在创建表格的时候

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

二．操作样式

CSS作为(X)HTML的辅助，可以增强页面的显示效果。但不是每个浏览器都能支持最新的CSS能力。CSS的能力和DOM级别密切相关，所以我们有必要检测当前浏览器支持CSS能力的级别。


1.访问元素的样式

任何HTML元素标签都会有一个通用的属性：style。它会返回CSSStypeDeclaration对象。下面我们看几个最常见的行内style样式的访问方式。

 

CSS属性及JavaScript调用

CSS属性

JavaScript调用

color

style.color

font-size

style.fontSize

float

非IE：style.cssFloat

float

IE：style.styleFloat

 

var box = document.getElementById('box');//获取box

box.style;//CSSStyleDeclaration

Box.style.color;//red

box.style.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';

 

DOM2级样式规范为style定义了一些属性和方法

属性或方法

说明

cssText

访问或设置style中的CSS代码

length

CSS属性的数量

parentRule

CSS信息的CSSRule对象

getPropertyCSSValue(name)

返回包含给定属性值的CSSValue对象

getPropertyPriority(name)

如果设置了!important，则返回，否则返回空字符串

item(index)

返回指定位置CSS属性名称

removeProperty(name)

从样式中删除指定属性

setProperty(name,v,p)

给属性设置为相应的值，并加上优先权

 

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样式，对于另外两种形式内联