JavaScriptDOM操作表格及样式

//使用DOM创建一个表格
	var table = document.createElement("table");
	table.width = 300; // table.setAttribute("width", 300);
	table.border = 1;
	document.body.appendChild(table);
	
	var caption = document.createElement('caption');
	table.appendChild(caption);
	//caption.innerHTML = '人员表';
	var captionText = document.createTextNode('人员表');
	caption.appendChild(captionText);
	
	 var thead = document.createElement('thead');
	 table.appendChild(thead);

//使用DOM去获取表格数据
	 var table = document.getElementsByTagName('table')[0];
	 alert(table.children[2].children[1].children[1].innerHTML);//不清晰
	 
	 var tbody = table.getElementsByTagName('tbody')[0];
	 var tr = tbody.getElementsByTagName('tr')[1];
	 var td = tr.getElementsByTagName('td')[1];
	 alert(td.innerHTML);                                       //比较清晰

//使用HTML DOM操作表格
	var table = document.getElementsByTagName('table')[0];
	 //alert(table.caption.innerHTML);
	 table.caption.innerHTML = '支出表';
	 //alert(table.tBodies[0]);
	 //alert(table.rows.length);//得到所有tr的行数
	 //alert(table.tBodies[0].rows.length);
	//alert(table.tBodies[0].rows[0].cells.length);
	alert(table.tBodies[0].rows[1].cells[1].innerHTML);


//使用HTML DOM操作表格
	var table = document.getElementsByTagName('table')[0];
	 //alert(table.caption.innerHTML);
	 table.caption.innerHTML = '支出表';
	 //alert(table.tBodies[0]);
	 //alert(table.rows.length);//得到所有tr的行数
	 //alert(table.tBodies[0].rows.length);
	//alert(table.tBodies[0].rows[0].cells.length);
	//alert(table.tBodies[0].rows[1].cells[1].innerHTML);
	
	//table.deleteCaption();
	//table.deleteTHead();
	//table.tBodies[0].deleteRow(0);
	//table.tBodies[0].rows[0].deleteCell(0);
	
	//创建表格
	var table = document.createElement("table");
	table.width = 300; // table.setAttribute("width", 300);
	table.border = 1;
	table.createCaption().innerHTML = '人员表';
	var thead = table.createTHead();
	var tr = thead.insertRow(0);
	tr.insertCell(0).innerHTML = '数据1';
	tr.insertCell(1).innerHTML = '数据2';
	tr.insertCell(2).innerHTML = '数据3';
	
	document.body.appendChild(table);

//DOM操作行内样式(style属性只能获取和设置行内，不能获取内联和链接)
var box = document.getElementById('box');
	//alert(box.style.color);
	//alert(box.style.background);
	//alert(box.style.fontSize);
	//alert(box.style.float);
	//alert(box.style.cssFloat);//非IE浏览器对关键字保留字的用法
	alert(box.style.styleFloat);//IE浏览器的调用方式
	alert(box.style.cssFloat || box.style.styleFloat);//跨浏览器兼容
	
	var box = document.getElementById('box');
	box.style.color = 'red'; 
	box.style.background = '#ccc';
	box.style.fontSize = '20px';
	typeof box.style.cssFloat != 'undefined'?box.style.cssFloat='right':box.style.styleFloat='right';

var box = document.getElementById('box');
var style = window.getComputedStyle(box, null);
alert(style.color);//计算后的样式，一般表示默认样式和设置后的样式.不仅
//可以获取没有设置的默认样式，也可以获取行内，内联和链接 alert(style.border);//复合型属性就无法获取了

操作样式表

window.onload = function(){

	
	var box = document.getElementById('box');
	//box.id = 'pox';//这么做会引发各种怪异的现象，最终是灾难性的。不建议通过变换ID来改变css样式
	box.className = 'bbb';
	box.className = "aaa bbb";
	alert(hasClass(box, 'a'));
	addClass(box,'ddd');
	removeClass(box, 'aaa');
};
//判断一个class是否存在
function hasClass(element, cName){
		return !!element.className.match(new RegExp('(\\s|^)'+cName +'(\\s|$)'));
}
//添加一个class
function addClass(element, cName){
	if(!hasClass(element, cName)){
		element.className += ' '+ cName;
	}
}
//移除一个class
function removeClass(element, cName){
	if(hasClass(element, cName)){
		element.className = element.className.replace(new RegExp('(\\s|^)'+cName +'(\\s|$)'),' ');
	}
}