JavaScript操做表格及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建立一個新的表格並顯示在頁面上，步驟以下：

1. 經過createElement('table')建立table元素
2. 經過table.createCaption()建立標題
3. 經過table.createTHead()建立表頭
4. 經過table.createTBody()窗體tbody
5. 經過tbody.insertRow(0)插入新行，並返回行對象。
6. 經過insertCell(0)建立單元格
7. 經過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有三種：

1. 行內樣式，即設置標籤的style屬性
2. 內聯樣式，即在<style>標籤內容設置
3. 外部樣式，即經過<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);

備註

次北固山下
[ 唐 ] 王灣

客路青山外，行舟綠水前。潮平兩岸闊，風正一帆懸。

海日生殘夜，江春入舊年。鄉書何處達？歸雁洛陽邊。