DIV CSS 佈局教程網

一、使用HTML標簽創建表格：

復制代碼代碼如下:
<tableborder="1"width="300">
<caption>人員表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<tdcolspan="3">合計：N</td>
</tr>
</tfoot>
</table>

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

二、使用DOM創建表格

<table>標簽是HTML中結構最為復雜的一個，我們可以通過DOM來創建生成它，或者HTMLDOM來操作它。(HTMLDOM提供了更加方便快捷的方式來操作HTML)

復制代碼代碼如下:
<script>
window.onload=function(){
vartable=document.createElement("table");
//給表格添加屬性
table.width=300;//還可以使用這種方法：table.setAttribute('width',300)
table.border=1;</p> <p>//創建表格的標題
varcaption=document.createElement("caption");
table.appendChild(caption);</p> <p>//給表格的標題添加內容
//caption.innerHTML="人員表";//非W3c標准的方法
varcaptionText=document.createTextNode("人員表");
caption.appendChild(captionText);</p> <p>
//創建表格的第一行，是個標題行
varthead=document.createElement("thead");
table.appendChild(thead);</p> <p>vartr=document.createElement("tr");
thead.appendChild(tr);</p> <p>//列
varth1=document.createElement("th");
tr.appendChild(th1);
th1.innerHTML="數據";
varth2=document.createElement("th");
tr.appendChild(th2);
th2.innerHTML="數據";</p> <p>document.body.appendChild(table);
};
</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來獲取表格的<caption>
alert(table.caption.innerHTML);//獲取caption的內容
//table.caption.innerHTML="學生表";//還可以設置值
};


復制代碼代碼如下:
window.onload=function(){
//使用HTMLDOM來獲取表格元素
vartable=document.getElementsByTagName('table')[0];//獲取table引用
//按HTMLDOM來獲取表頭表尾<thead>、<tfoot>
alert(table.tHead);//獲取表頭
alert(table.tFoot);//獲取表尾</p> <p>//按HTMLDOM來獲取表體<tbody>
alert(table.tBodies);//獲取表體的集合
};

在一個表格中<thead>和<tfoot>是唯一的，只能有一個。而<tbody>不是唯一的可以有多個，這樣導致最後返回的<thead>和<tfoot>是元素引用，而<tbody>返回的是元素集合。

復制代碼代碼如下:
window.onload=function(){
//使用HTMLDOM來獲取表格元素
vartable=document.getElementsByTagName('table')[0];//獲取table引用
//按HTMLDOM來獲取表格的行數
alert(table.rows.length);//獲取行數的集合，數量</p> <p>//按HTMLDOM來獲取表格主體裡的行數
alert(table.tBodies[0].rows.length);//獲取主體的行數的集合，數量
};


復制代碼代碼如下:
window.onload=function(){
//使用HTMLDOM來獲取表格元素
vartable=document.getElementsByTagName('table')[0];//獲取table引用</p> <p>//按HTMLDOM來獲取表格主體內第一行的單元格數量(tr)
alert(table.tBodies[0].rows[0].cells.length);//獲取第一行單元格的數量
};


復制代碼代碼如下:
window.onload=function(){
//使用HTMLDOM來獲取表格元素
vartable=document.getElementsByTagName('table')[0];//獲取table引用</p> <p>//按HTMLDOM來獲取表格主體內第一行第一個單元格的內容(td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML);//獲取第一行第一個單元格的內容
};


復制代碼代碼如下:
<script>
window.onload=function(){
//使用HTMLDOM來獲取表格元素
vartable=document.getElementsByTagName('table')[0];//獲取table引用</p> <p>//按HTMLDOM來刪除標題、表頭、表尾、行、單元格
//table.deleteCaption();//刪除標題
//table.deleteTHead();//刪除<thead>
//table.tBodies[0].deleteRow(0);//刪除<tr>一行
//table.tBodies[0].rows[0].deleteCell(0);//刪除<td>一個單元格
//table.tBodies[0].rows[0].deleteCell(1);//刪除一個單元格中的內容，相當於刪除掉一個單元格，後面的但願會補進
};
</script>

五、HTMLDOM創建表格

復制代碼代碼如下:
window.onload=function(){
//按HTMLDOM創建一個表格
vartable=document.createElement('table');
table.border=1;
table.width=300;</p> <p>table.createCaption().innerHTML='人員表';</p> <p>//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead();//該方法返回一個引用
vartr=thead.insertRow(0);//該方法返回一個引用</p> <p>vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('數據'));//添加數據的一種方式，還可以使用下面種方式
td.innerHTML="數據";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('數據2'));
td2.innerHTML="數據2";</p> <p>document.body.appendChild(table);
};在創建表格的時候<table>、<tbody>、<th>沒有特定的方法，需要使用document來創建。也可以模擬已有的方法編寫特定的函數即可，例如：insertTH()之類的。