JavaScript DOM操作表格及樣式_基礎知識

一 操作表

標籤是HTML中結構最為複雜的一個,我們可以透過DOM來建立產生它,或HTMLDOM來操作它;

// 使用DOM来创建表格;
 var table = document.createElement('table');
 table.border = 1;
 table.width = 300;

 var caption = document.createElement('caption');
 table.appendChild(caption);
 caption.appendChild(document.createTextNode('人员表'));

 var thead = document.createElement('thead');
 table.appendChild(thead);

 var tr = document.createElement('tr');
 thead.appendChild(tr);

 var th1 = document.createElement('th');
 var th2 = document.createElement('th');

 tr.appendChild(th1);
 th1.appendChild(document.createTextNode('姓名'));
 tr.appendChild(th2);
 th2.appendChild(document.createTextNode('年龄'));

 document.body.appendChild(table);

// 表格較為複雜,層次也多,使用之前的DOM來取得某個元素會比較麻煩;推薦使用HTMLDOM;
HTMLDOM 屬性與方法介紹
屬性或方法 說明
caption 保存

元素的HTMLCollection集合;
tFoot 保存著對元素的引用;
tHead 保存著對元素的引用;
rows 保存對元素的HTMLCollection集合;
createTHead() 建立元素,並回傳引用;
createTFoot() 建立元素,並回傳引用;
createCpation() 建立元素;
deleteTFoot() 刪除元素;
deleteCaption() 刪除元素新增的屬性和方法
rows 保存元素中行的HTMLCollection;
deleteRow(pos) 刪除指定位置的行;
insertRow(pos) 向rows集合中的指定位置插入一行;

元素所新增的屬性與方法
cells 保存著元素中儲存格的HTMLCollectioin集合;
deleteCell(pos) 刪除指定位置的儲存格;
insertCell(pos) 向cells集合的指定位置插入一個儲存格,並傳回參考;

// HTMLDOM取得表格的

和是唯一的,只能有一個;
// 而不是唯一的,可以是多個,這樣導致最後回傳的和是元素引用;而是元素集合;

二 操作樣式

 CSS作為(X)HTML的輔助,可以增強頁面的顯示效果,但不是每個瀏覽器都能支援最新的CSS能力;
 CSS的能力和DOM等級密切相關,所以需要偵測目前瀏覽器的支援CSS能力的等級;
 在HTML中定義樣式的方式有3種:
 (1).使用style特性定義針對特定元素的樣式;
 (2).使用

元素的引用;
tBodies 保存

元素,並回傳引用;
deleteTHead() 刪除

元素;
deleteRow(pos) 刪除指定的行;
insertRow(pos) 向rows集合中的指定位置插入一行;

alert(table.caption.innerHTML); // 取得caption的內容;

// PS:在一個表格中