dom操作表格示例(dom創(chuàng)建表格)
來源:易賢網(wǎng) 閱讀:820 次 日期:2014-09-23 15:30:29
溫馨提示:易賢網(wǎng)小編為您整理了“dom操作表格示例(dom創(chuàng)建表格)”,方便廣大網(wǎng)友查閱!

一、使用HTML標(biāo)簽創(chuàng)建表格:

代碼如下:

<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標(biāo)簽在一個表格中只能有一個tbody、tr、td、th標(biāo)簽在一個表格中可以有N個

二、使用DOM創(chuàng)建表格

<table>標(biāo)簽是HTML中結(jié)構(gòu)最為復(fù)雜的一個,我們可以通過DOM來創(chuàng)建生成它,或者HTMLDOM來操作它。(HTMLDOM提供了更加方便快捷的方式來操作HTML)

代碼如下:

<script>

window.onload=function(){

vartable=document.createElement("table");

//給表格添加屬性

table.width=300;//還可以使用這種方法:table.setAttribute('width',300)

table.border=1;</p> <p>//創(chuàng)建表格的標(biāo)題

varcaption=document.createElement("caption");

table.appendChild(caption);</p> <p>//給表格的標(biāo)題添加內(nèi)容

//caption.innerHTML="人員表";//非W3c標(biāo)準(zhǔn)的方法

varcaptionText=document.createTextNode("人員表");

caption.appendChild(captionText);</p> <p>

//創(chuàng)建表格的第一行,是個標(biāo)題行

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="數(shù)據(jù)";

varth2=document.createElement("th");

tr.appendChild(th2);

th2.innerHTML="數(shù)據(jù)";</p> <p>document.body.appendChild(table);

};

</script>

三、使用DOM獲取表格數(shù)據(jù)(使用DOM操作表格會很煩)

代碼如下:

window.onload=function(){

vartable=document.getElementsByTagName("table")[0];

alert(table.children[0].innerHTML);

};

四、使用HTMLDOM來獲取表格數(shù)據(jù)(方便,簡單,清晰)。

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

代碼如下:

window.onload=function(){

//使用HTMLDOM來獲取表格元素

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

//按HTMLDOM來獲取表格的<caption>

alert(table.caption.innerHTML);//獲取caption的內(nèi)容

//table.caption.innerHTML="學(xué)生表";//還可以設(shè)置值

};

代碼如下:

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>不是唯一的可以有多個,這樣導(dǎo)致最后返回的<thead>和<tfoot>是元素引用,而<tbody>返回的是元素集合。

代碼如下:

window.onload=function(){

//使用HTMLDOM來獲取表格元素

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

//按HTMLDOM來獲取表格的行數(shù)

alert(table.rows.length);//獲取行數(shù)的集合,數(shù)量</p> <p>//按HTMLDOM來獲取表格主體里的行數(shù)

alert(table.tBodies[0].rows.length);//獲取主體的行數(shù)的集合,數(shù)量

};

代碼如下:

window.onload=function(){

//使用HTMLDOM來獲取表格元素

vartable=document.getElementsByTagName('table')[0];//獲取table引用</p> <p>//按HTMLDOM來獲取表格主體內(nèi)第一行的單元格數(shù)量(tr)

alert(table.tBodies[0].rows[0].cells.length);//獲取第一行單元格的數(shù)量

};

代碼如下:

window.onload=function(){

//使用HTMLDOM來獲取表格元素

vartable=document.getElementsByTagName('table')[0];//獲取table引用</p> <p>//按HTMLDOM來獲取表格主體內(nèi)第一行第一個單元格的內(nèi)容(td)

alert(table.tBodies[0].rows[0].cells[0].innerHTML);//獲取第一行第一個單元格的內(nèi)容

};

代碼如下:

<script>

window.onload=function(){

//使用HTMLDOM來獲取表格元素

vartable=document.getElementsByTagName('table')[0];//獲取table引用</p> <p>//按HTMLDOM來刪除標(biāo)題、表頭、表尾、行、單元格

//table.deleteCaption();//刪除標(biāo)題

//table.deleteTHead();//刪除<thead>

//table.tBodies[0].deleteRow(0);//刪除<tr>一行

//table.tBodies[0].rows[0].deleteCell(0);//刪除<td>一個單元格

//table.tBodies[0].rows[0].deleteCell(1);//刪除一個單元格中的內(nèi)容,相當(dāng)于刪除掉一個單元格,后面的但愿會補(bǔ)進(jìn)

};

</script>

五、HTMLDOM創(chuàng)建表格

代碼如下:

window.onload=function(){

//按HTMLDOM創(chuàng)建一個表格

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('數(shù)據(jù)'));//添加數(shù)據(jù)的一種方式,還可以使用下面種方式

td.innerHTML="數(shù)據(jù)";

vartd2=tr.insertCell(1);

//td2.appendChild(document.createTextNode('數(shù)據(jù)2'));

td2.innerHTML="數(shù)據(jù)2";</p> <p>document.body.appendChild(table);

};在創(chuàng)建表格的時候<table>、<tbody>、<th>沒有特定的方法,需要使用document來創(chuàng)建。也可以模擬已有的方法編寫特定的函數(shù)即可,例如:insertTH()之類的。

更多信息請查看IT技術(shù)專欄

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:dom操作表格示例(dom創(chuàng)建表格)
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機(jī)號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機(jī)站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)