一、使用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);
};
複製程式碼程式碼如下:window.onload=function{//使用HTMLDOM來取得表格元素vartable=document.getElementsByTagName('table')[0];//取得table引用//按HTMLDOM來取得表格的alert>//按HTMLDOM來取得表格的alert (table.caption.innerHTML);//取得caption的內容//table.caption.innerHTML="學生表";//也可以設定值}; 複製程式碼程式碼如下:
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(){
複製代碼
程式碼如下:
<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);//刪除一個單元格中的內容，相當於刪除掉一個單元格，後面的但願會補進
};
複製程式碼 程式碼如下: 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()之類的。 |
|
