JavaScript DOM操作表格及样式

一操作表格

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

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

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

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

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

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

二操作样式

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

JavaScript DOM操作表格及样式

一 操作表格

二 操作样式

一操作表格

二操作样式