dom操作表格範例(dom建立表格)_HTML/Xhtml_網頁製作

一、使用HTML標籤建立表格：

複製程式碼

程式碼如下:

人員表


姓名
性別
年齡




張三
男
20


李四
女
22




合計：N

thead、tfoot、caption標籤在一個表格中只能有一個tbody、tr、td、th標籤在一個表格中可以有N個

二、使用DOM建立表格

標籤是HTML中結構最複雜的一個，我們可以透過DOM來建立產生它，或是HTMLDOM來操作它。 (HTMLDOM提供了更方便快速的方式來操作HTML)

複製程式碼

程式碼如下:

<script><br /><dow🎜><dow =function(){<br />vartable=document.createElement("table");<br />//為表格新增屬性<br />table.width=300;//也可以使用此方法：table.setAttribute( 'width',300)<br />table.border=1; <p>//建立表格的標題<br />varcaption=document.createElement("caption");<br />table.appendChild(caption); <p>//為表格的標題新增內容<br />//caption.innerHTML="人員表";//非W3c標準的方法<br />varcaptionText=document.createTextNode("人員表");<br /> caption.appendChild(captionText); <p><br />//建立表格的第一行，是個標題行<br />varthead=document.createElement("thead");<br />table.appendChild(thead); <p>vartr=document.createElement("tr");<br />thead.appendChild(tr); <p>//列<br />varth1=document.createElement("th");<br />tr.appendChild(th1);<br />th1.innerHTML="數據";<br />varth2=document.createElement( "th");<br />tr.appendChild(th2);<br />th2.innerHTML="數據"; <p>document.body.appendChild(table);<br />};<br /></script>

三、使用DOM取得表格資料（使用DOM操作表格會很煩）

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製碼:


window.onload=function(){
vartable=document.getElementsByTagName("table")[0];
alert(table.children[0].innerHTML);
};

四、使用HTMLDOM來取得表格資料（方便，簡單，清晰）。

因為表格較為繁雜，層次也多，在使用之前所學習的DOM只是來獲取某個元素會非常難受，所以使用HTMLDOM會清晰很多。

複製程式碼程式碼如下:window.onload=function{//使用HTMLDOM來取得表格元素vartable=document.getElementsByTagName('table')[0];//取得table引用//按HTMLDOM來取得表格的、
alert(table.tHead);//取得表頭
alert(table.tFoot);//取得表尾

//按HTMLDOM取得表體

alert(table.tBodies);//取得表體的集合
};

在一個表格中

和

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

複製程式碼

程式碼如下:

window.onload=function{
//使用HTMLDOM來取得表格元素
vartable=document.getElementsByTagName('table')[0];//取得table引用
//按HTMLDOM來取得表格的行數
alert( table.rows.length);//取得行數的集合，數量

//按HTMLDOM來取得表格主體裡的行數
alert(table.tBodies[0].rows.length);//取得主體的行數的集合，數量
};

複製程式碼

程式碼如下:

程式碼如下:


程式碼如下:
//使用HTMLDOM來取得表格元素
vartable=document.getElementsByTagName('table')[0];//取得table引用

//按HTMLDOM取得表格主體內第一行的儲存格數量(tr)
alert(table.tBodies[0].rows[0].cells.length);//取得第一行儲存格的數量

};

複製程式碼



複製程式碼

程式碼

window.onload=function(){

//使用HTMLDOM取得表格元素

vartable=document.getElementsByTagName('table')[0];//取得table引用

//按HTMLDOM來取得表格主體內第一行第一個單元格的內容(td)alert(table.tBodies[0].rows[0].cells[0].innerHTML); //獲取第一行第一個單元格的內容};

複製代碼


程式碼如下:


<script><br />window.onload=function(){<br />//使用HTMLDOM來取得表格元素<br />vartable=document.getElementsByTagName(' table')[0];//取得table引用 <p>//按HTMLDOM刪除標題、表頭、表尾、行、儲存格</script>

//table.deleteCaption();//刪除標題//table.deleteTHead();//刪除

//table.tBodies[0].deleteRow(0);//刪除

一行//table.tBodies[0].rows[0].deleteCell(0);/ /刪除

一個單元格

//table.tBodies[0].rows[0].deleteCell(1);//刪除一個單元格中的內容，相當於刪除掉一個單元格，後面的但願會補進
};

五、HTMLDOM建立表格

複製程式碼


程式碼如下:


window.onload=function{
//按HTMLDOM建立一個表格
vartable=document.createElement('table');
table.border=1;
table.width=300;

table.createCaption().innerHTML='人員表';

//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead();//此方法回傳一個引用

vartr=thead. insertRow(0);//該方法傳回一個引用

vartd=tr.insertCell(0);

//td.appendChild(document.createTextNode('資料'));//新增資料的一種方式，也可以使用下面種方式td .innerHTML="數據";vartd2=tr.insertCell(1);//td2.appendChild(document.createTextNode('數據2'));td2.innerHTML="數據2" ;

document.body.appendChild(table);};在建立表格的時候

、、

沒有特定的方法，需要使用document來建立。也可以模擬已有的方法編寫特定的函數即可，例如：insertTH()之類的。