在前端開發中，表格主要用於存儲結構化的數據，CSS主要用於修飾DOM元素，如何通過DOM來操作表格及CSS呢？本文主要通過一些簡單的小例子，簡述DOM對錶格和CSS的常見操作方法，僅供學習分享使用，如有不足之處，還請指正。 ...
概述
在前端開發中，表格主要用於存儲結構化的數據，CSS主要用於修飾DOM元素，如何通過DOM來操作表格及CSS呢？本文主要通過一些簡單的小例子，簡述DOM對錶格和CSS的常見操作方法，僅供學習分享使用，如有不足之處，還請指正。
獲取表格及數據
假如當前有一個表格，id為tb01，如下所示：
1 <table id="tb01" width="300" border="1" cellspacing="2" cellpadding="2"> 2 <caption>人員表</caption> 3 <thead> 4 <tr> 5 <td>姓名</td> 6 <td>性別</td> 7 <td>年齡</td> 8 </tr> 9 </thead> 10 <tbody> 11 <tr> 12 <td>Tom</td> 13 <td>boy</td> 14 <td>20</td> 15 </tr> 16 <tr> 17 <td>Jack</td> 18 <td>girl</td> 19 <td>19</td> 20 </tr> 21 </tbody> 22 <tfoot> 23 <tr> 24 <td colspan="3">合計：2</td> 25 </tr> 26 </tfoot> 27 </table>View Code
獲取表格的標題[caption]，表頭[thead]，內容[tbody]，表尾[tfoot]，行數[rows]，某一行的列數[cells]等等，如下所示：
1 var table=document.getElementById('tb01'); 2 alert(table.caption.innerText);//獲取標題文本 3 alert(table.tHead);//獲取表頭，輸出[object HTMLTableSectionElement] 4 alert(table.tBodies);//獲取tbody 輸出：[object HTMLCollection] 5 alert(table.tFoot);//獲取表尾，輸出[object HTMLTableSectionElement] 6 7 alert(table.rows.length);//得到行數 4行 8 9 alert(table.tBodies[0].rows.length);//獲取tbody下有多少行 ，2行 10 alert(table.tBodies[0].rows[0].cells.length);//獲取對應行有幾列，，3列
獲取單元格裡面的內容，如下所示：
1 alert(table.tBodies[0].rows[1].cells[1].innerHTML);//獲取tody下第二行第二列的內容 輸出：girl
如何刪除表格中的標題[caption]，表頭[thead]，表尾[tfoot]，某行[row]，某個單元格[cell]，等內容，如下所示：
1 table.deleteCaption();//刪除標題 2 table.deleteTHead();//刪除表頭 3 table.deleteTFoot();//刪除表尾 4 table.tBodies[0].deleteRow(0);//刪除tbody第0行 5 table.tBodies[0].rows[0].deleteCell(1);//刪除tbody第0行的第1列，右側單元格前移
創建表格及填充數據
從0創建一個新的表格並顯示在頁面上，步驟如下：
- 通過createElement('table')創建table元素
- 通過table.createCaption()創建標題
- 通過table.createTHead()創建表頭
- 通過table.createTBody()窗體tbody
- 通過tbody.insertRow(0)插入新行，並返回行對象。
- 通過insertCell(0)創建單元格
- 通過document.body.appendChild(table);將table插入到body中
1 var table=document.createElement('table'); 2 table.border=1; 3 table.width=300; 4 table.createCaption().innerHTML='人員表2'; 5 var thead = table.createTHead(); 6 var tr = thead.insertRow(); 7 tr.insertCell(0).innerHTML='Name'; 8 tr.insertCell(1).innerHTML='Sexy'; 9 tr.insertCell(2).innerHTML='Age'; 10 var tbody=table.createTBody(); 11 var tr0 =tbody.insertRow(0); 12 tr0.insertCell(0).innerHTML='Lily'; 13 tr0.insertCell(1).innerHTML='girl'; 14 tr0.insertCell(2).innerHTML='12'; 15 var tr1 =tbody.insertRow(1); 16 tr1.insertCell(0).innerHTML='Lucy'; 17 tr1.insertCell(1).innerHTML='girl'; 18 tr1.insertCell(2).innerHTML='13'; 19 var tfoot=table.createTFoot(); 20 var tr3 = tfoot.insertRow(); 21 var tc3= tr3.insertCell(0); 22 tc3.innerHTML='合計：2'; 23 tc3.colSpan=3; 24 document.body.appendChild(table);//將table插入到body中
CSS樣式
CSS有三種：
- 行內樣式，即設置標簽的style屬性
- 內聯樣式，即在<style>標簽內容設置
- 外部樣式，即通過<link href >引入
DOM操作style
有一個DIV樣式如下所示：
1 <div id="A01" style="color: red;background-color: blanchedalmond;font-size: 30px;float: left;">Hello JavaScript</div>
如何獲取style設置的樣式
1 var box=document.getElementById('A01'); 2 alert(box.style);//box的行內樣式對象。輸出：[object MSStyleCSSProperties] 3 alert( box.style.color);//獲取設置的顏色 4 alert(box.style.backgroundColor);//獲取設置的背景顏色，如果設置屬性中有-連接符，則用大寫表示 5 alert(box.style.fontSize);//獲取設置的字型大小 30px 6 box.style.float;//關鍵字，會報錯 7 alert(box.style.styleFloat);//IE11支持，獲取浮動 left 8 alert(box.style.cssFloat);//IE11支持，獲取浮動 left 9 alert(box.style.cssText);//獲取style的文本內容 10 box.style.setProperty('color','yellow');//IE11支持，設置樣式屬性
獲取計算後的樣式
1 //獲取計算後的樣式 2 var s = window.getComputedStyle(box,null);//IE11支持，返回[object CSSStyleDeclaration] 3 alert(s); 4 alert(s.color);//返回：rgb(255,0,0)
獲取當前樣式
1 var s =box.currentStyle;//IE11支持，返回[object MSCurrentStyleProperties] 2 alert(s); 3 alert(s.color);//返回：red
改變樣式
有一個DIV元素樣式如下所示：
1 <div id="box" class="one" style="color: orange;">hello js!!!</div>
當元素的樣式是通過ID來設置的，則可以通過更換ID來變更樣式，但一般不建議此方式，因為id是唯一的，隨意變更會引起錯亂。如下所示：
1 var box=document.getElementById('box'); 2 box.id='pox';//一般不建議此方式，因為id是唯一的。
通過class添加樣式
DOM通過className來獲取和變更樣式，如下所示：
1 //通過class添加樣式 2 var box=document.getElementById('box'); 3 box.className='two';//會把之前的樣式清除掉，再重新添加樣式，這樣會覆蓋之前的css樣式 4 box.className='one two';//可以一次寫多個樣式 5 function hasClass(element ,cname){ 6 var className=element.className; 7 //return !!!className.match(new RegExp(cname)); 8 return className.indexOf(cname,0)>-1; 9 } 10 alert( hasClass(box,'one'));//返回是否包含樣式 11 12 //增加樣式 13 function addClass(box,cname){ 14 box.className+=' '+cname; 15 } 16 17 //刪除樣式 18 function removeClass(box,cname){ 19 box.className = box.className.replace(cname,' '); 20 }
DOM操作外部樣式
獲取link
1 //獲取link 2 var link=document.getElementsByTagName('link')[0];//獲取第一個link連接的外部css文件對象 3 var sheet=link.sheet || link.stylesheet;//為了防止瀏覽器不相容 4 alert(sheet);//輸出：[object CSSStyleSheet] 5 6 //如果既有link又有style獲取會比較麻煩 7 var sheets = document.styleSheets; 8 alert(sheets);//獲取的是styleSheets列表 輸出[object StyleSheetList] 9 var sheet=sheets[0]; 10 alert( sheet.disabled);//是否被禁用 11 alert(sheet.href);//css樣式的路徑 12 alert(sheet.title);//獲取或設置link的title 13 alert(sheet.media[0]);//IE11，是undefined
CSS樣式規則集合
1 alert(sheet.cssRules);//CSS樣式規則集合，輸出 [object CSSRuleList] 2 alert(sheet.cssRules.length);//規則的長度 3 alert(sheet.cssRules[0].cssText);//第一個規則的css文本 .one{font-size:20px;} 4 alert(sheet.cssRules[0].selectorText);//第一個規則的選擇符 輸出.one 5 sheet.deleteRule(0);//刪除第一條規則 6 sheet.insertRule('body{background-color:orange;}',0);//插入一條規則，第一個參數：規則內容，第二參數：插入位置
以下方法和上述一致，可以相容兩種，來相容不同的瀏覽器，如下所示：
1 alert( sheet.rules);//輸出[object MSCSSRuleList] 2 alert(sheet.rules[0].selectorText);////第一個規則的選擇符 輸出.one 3 alert(sheet.rules[0].cssText);//第一個規則的css文本 .one{font-size:20px;} 4 sheet.addRule('body','background-color:orange;',0);//添加規則 5 sheet.removeRule(0);//刪除規則 6 alert( sheet.rules[0].style.color);//行內，內聯，樣式都可以獲取到 7 alert(sheet.cssRules[0].style.color);
備註
次北固山下
[ 唐 ] 王灣
客路青山外，行舟綠水前。潮平兩岸闊，風正一帆懸。
海日生殘夜，江春入舊年。鄉書何處達？歸雁洛陽邊。
