//使用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|$)'),' '); } }