JavaScript操作表格及CSS樣式

概述

在前端開發中，表格主要用于存儲結構化的資料，CSS主要用于修飾DOM元素，如何通過DOM來操作表格及CSS呢？本文主要通過一些簡單的小例子，簡述DOM對表格和CSS的常見操作方法，僅供學習分享使用，如有不足之處，還請指正。

擷取表格及資料

假如目前有一個表格，id為tb01，如下所示：

<table id="tb01" width="300"  cellspacing="2" cellpadding="2">
    <caption>人員表</caption>
    <thead>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年齡</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td>boy</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>girl</td>
            <td>19</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">合計：2</td>
        </tr>
    </tfoot>
</table>
           

擷取表格的标題[caption]，表頭[thead]，内容[tbody]，表尾[tfoot]，行數[rows]，某一行的列數[cells]等等，如下所示：

var table=document.getElementById('tb01');
alert(table.caption.innerText);//擷取标題文本
alert(table.tHead);//擷取表頭，輸出[object HTMLTableSectionElement]
alert(table.tBodies);//擷取tbody 輸出：[object HTMLCollection]
alert(table.tFoot);//擷取表尾，輸出[object HTMLTableSectionElement]

alert(table.rows.length);//得到行數 4行

alert(table.tBodies[0].rows.length);//擷取tbody下有多少行 ，2行
alert(table.tBodies[0].rows[0].cells.length);//擷取對應行有幾列，，3列
           

擷取單元格裡面的内容，如下所示：

alert(table.tBodies[0].rows[1].cells[1].innerHTML);//擷取tody下第二行第二列的内容 輸出：girl
           

如何删除表格中的标題[caption]，表頭[thead]，表尾[tfoot]，某行[row]，某個單元格[cell]，等内容，如下所示：

table.deleteCaption();//删除标題            
table.deleteTHead();//删除表頭
table.deleteTFoot();//删除表尾
table.tBodies[0].deleteRow(0);//删除tbody第0行
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中

var table=document.createElement('table');
table.border=1;
table.width=300;
table.createCaption().innerHTML='人員表2';
var thead = table.createTHead();
var tr = thead.insertRow();
tr.insertCell(0).innerHTML='Name';
tr.insertCell(1).innerHTML='Sexy';
tr.insertCell(2).innerHTML='Age';
var tbody=table.createTBody();
var tr0 =tbody.insertRow(0);
tr0.insertCell(0).innerHTML='Lily';
tr0.insertCell(1).innerHTML='girl';
tr0.insertCell(2).innerHTML='12';
var tr1 =tbody.insertRow(1);
tr1.insertCell(0).innerHTML='Lucy';
tr1.insertCell(1).innerHTML='girl';
tr1.insertCell(2).innerHTML='13';
var tfoot=table.createTFoot();
var tr3 = tfoot.insertRow();
var tc3= tr3.insertCell(0);
tc3.innerHTML='合計：2';
tc3.colSpan=3;
document.body.appendChild(table);//将table插入到body中
           

CSS樣式

CSS有三種：

1. 行内樣式，即設定标簽的style屬性
2. 内聯樣式，即在<style>标簽内容設定
3. 外部樣式，即通過<link href >引入

DOM操作style

有一個DIV樣式如下所示：

<div id="A01" style="color: red;background-color: blanchedalmond;font-size: 30px;float: left;">Hello JavaScript</div>
           

如何擷取style設定的樣式

var box=document.getElementById('A01');
alert(box.style);//box的行内樣式對象。輸出：[object MSStyleCSSProperties]
alert( box.style.color);//擷取設定的顔色
alert(box.style.backgroundColor);//擷取設定的背景顔色，如果設定屬性中有-連接配接符，則用大寫表示
alert(box.style.fontSize);//擷取設定的字号 30px
box.style.float;//關鍵字，會報錯
alert(box.style.styleFloat);//IE11支援，擷取浮動 left
alert(box.style.cssFloat);//IE11支援，擷取浮動 left
alert(box.style.cssText);//擷取style的文本内容
box.style.setProperty('color','yellow');//IE11支援，設定樣式屬性
           

擷取計算後的樣式

//擷取計算後的樣式
var s = window.getComputedStyle(box,null);//IE11支援，傳回[object CSSStyleDeclaration]
alert(s);
alert(s.color);//傳回：rgb(255,0,0) 
           

擷取目前樣式

var s =box.currentStyle;//IE11支援，傳回[object MSCurrentStyleProperties]
alert(s);
alert(s.color);//傳回：red
           

改變樣式

有一個DIV元素樣式如下所示：

<div id="box" class="one" style="color: orange;">hello js!!!</div>
           

當元素的樣式是通過ID來設定的，則可以通過更換ID來變更樣式，但一般不建議此方式，因為id是唯一的，随意變更會引起錯亂。如下所示：

var box=document.getElementById('box');
box.id='pox';//一般不建議此方式，因為id是唯一的。
           

通過class添加樣式

DOM通過className來擷取和變更樣式，如下所示：

//通過class添加樣式
var box=document.getElementById('box');
box.className='two';//會把之前的樣式清除掉，再重新添加樣式，這樣會覆寫之前的css樣式
box.className='one two';//可以一次寫多個樣式
function hasClass(element ,cname){
    var className=element.className;
    //return !!!className.match(new RegExp(cname));
    return  className.indexOf(cname,0)>-1;
}
alert( hasClass(box,'one'));//傳回是否包含樣式

//增加樣式
function addClass(box,cname){
    box.className+=' '+cname;
}

//删除樣式
function removeClass(box,cname){
    box.className = box.className.replace(cname,' ');
}
           

DOM操作外部樣式

擷取link

//擷取link
var link=document.getElementsByTagName('link')[0];//擷取第一個link連接配接的外部css檔案對象
var sheet=link.sheet || link.stylesheet;//為了防止浏覽器不相容
alert(sheet);//輸出：[object CSSStyleSheet]

//如果既有link又有style擷取會比較麻煩
var sheets = document.styleSheets;
alert(sheets);//擷取的是styleSheets清單 輸出[object StyleSheetList]
var sheet=sheets[0];
alert( sheet.disabled);//是否被禁用
alert(sheet.href);//css樣式的路徑
alert(sheet.title);//擷取或設定link的title
alert(sheet.media[0]);//IE11，是undefined
           

CSS樣式規則集合

alert(sheet.cssRules);//CSS樣式規則集合，輸出 [object CSSRuleList]
alert(sheet.cssRules.length);//規則的長度
alert(sheet.cssRules[0].cssText);//第一個規則的css文本 .one{font-size:20px;}
alert(sheet.cssRules[0].selectorText);//第一個規則的選擇符 輸出.one
sheet.deleteRule(0);//删除第一條規則
sheet.insertRule('body{background-color:orange;}',0);//插入一條規則，第一個參數：規則内容，第二參數：插入位置
           

以下方法和上述一緻，可以相容兩種，來相容不同的浏覽器，如下所示：

alert( sheet.rules);//輸出[object MSCSSRuleList]
alert(sheet.rules[0].selectorText);第一個規則的選擇符 輸出.one
alert(sheet.rules[0].cssText);//第一個規則的css文本 .one{font-size:20px;}
sheet.addRule('body','background-color:orange;',0);//添加規則
sheet.removeRule(0);//删除規則
alert( sheet.rules[0].style.color);//行内，内聯，樣式都可以擷取到
alert(sheet.cssRules[0].style.color);
           

備注

次北固山下

[ 唐 ] 王灣

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

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