一、dom操作表格
//使用 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);
二、使用HTML DOM来操作表格
1、获取表格内容
//按 HTML DOM 来获取表格的<caption>的内容
alert(table.caption.innerHTML);
//按 HTML DOM 来获取表头表尾<thead> <tfoot>
alert(table.tHead);//返回的是一个对象
alert(table.tFoot);//返回的是一个对象
//按 HTML DOM 来获取表体<tbody>
alert(table.tBodies);//返回的是一个集合
//按 HTML DOM 来获取表格的行数
alert(table.rows.length);
//按 HTML DOM 来获取表格主体里的行数
alert(table.tBodies[0].rows.length);
//按 HTML DOM 来获取表格主体内第一行的
alert(table.tBodies[0].rows[0].cells.length);
//按 HTML DOM 来获取表格主体内第一行第一个单元格的内容
alert(table.tBodies[0].rows[0].cells[0].innerHTML);
//PS:在一个表格中<thead>和<tfoot>是唯一的,只能有一个。这样导致最后返回的<thead>和<tfoot>是元素引用.
// <tbody>不是唯一的可以 有多个,<tbody>返回的是元素集合。
2、删除表格内容
//按 HTML DOM 来删除标题、表头、表尾、行、单元格
table.deleteCaption();
table.deleteTHead();
table.tBodies[0].deleteRow(0);
table.tBodies[0].rows[0].deleteCell(0);
3、创建表格
//按 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:在创建表格的时候<table>、<tbody>、<th>没有特定的方法,需要使用 document 来创建。
// 也可以模拟已有的方法编写特定的函数即可,例如:insertTH()之类的。
三、样式操作
1、获取样式
//style属性只能获得行内样式,内联和链接样式是获取不到的。
function getStyle(){
//获取节点对象
var box = document.getElementById('box');
//获取属性对象
var styleObj = box.style;
//获取各种属性
var color = styleObj.color;//获取字体颜色
var bgColor = styleObj.background;//获取背景颜色
var font = styleObj.fontSize;//获取字体大小 不能使用font-size.凡是带-都需要去掉后将字母大写:fontSize
var float = styleObj.float;//获取浮动样式
var cssStyle = styleObj.cssText;//获取css的样式文本
alert(color + font + float + bgColor);
alert(cssStyle);
}
2、设置样式
function setStyle(){
//获取节点对象
var box = document.getElementById('box');
//获取属性对象
var styleObj = box.style;
//给属性赋值
styleObj.color = 'green';
styleObj.background = 'red';
styleObj.fontSize = '16px';
styleObj.float = 'left';
}
3、计算样式
//计算过的样式
//计算过的样式对象是可以获得行内、内联和链接样式的,因为不管任何样式最后都是要驻留在计算机内的。
//需要注意的是符合样式最后是无法驻留在计算机内的比如border属性。
function getComStyle(){
var box = document.getElementById('box');
//获取计算后的样式对象
//计算后的样式对象是包括默认或设置过的样式,若样式没有设置就显示默认的。
var comStyle = getComputedStyle(box);//非IE浏览器支持
//var comSyleIe = box.currentStyle;//IE浏览器不支持getComputedStyle方法,用这个代替
//做兼容处理
//var comStyle1 = box.getComputedStyle ? comStyle:null || box.currentStyle;
//获取计算后的属性
var color = comStyle.color;
var bgColor = comStyle.background;
var fontSize = comStyle.fontSize;
var float = comStyle.float;
alert(color + fontSize + float + bgColor);