JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 8-1 動(dòng)態(tài)表格制作_第1頁(yè)
JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 8-1 動(dòng)態(tài)表格制作_第2頁(yè)
JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 8-1 動(dòng)態(tài)表格制作_第3頁(yè)
JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 8-1 動(dòng)態(tài)表格制作_第4頁(yè)
JavaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 課件 8-1 動(dòng)態(tài)表格制作_第5頁(yè)
已閱讀5頁(yè)，還剩20頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

項(xiàng)目8.1表格主講：***2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)1子項(xiàng)目2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)2學(xué)習(xí)任務(wù)

任務(wù)1靜態(tài)表格

任務(wù)2動(dòng)態(tài)創(chuàng)建表格

任務(wù)3動(dòng)態(tài)添加表格

任務(wù)4修改單元格內(nèi)容

任務(wù)5刪除表格2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)3任務(wù)1靜態(tài)表格在JavaScript中，如果所需要制作的表格是屬于大小和內(nèi)容固定，就可以使用表格的標(biāo)記來(lái)完成表格的制作。表格具有5個(gè)最基本的HTML標(biāo)記：（1）<table>標(biāo)記：用于定義整個(gè)表格（2）<tr>標(biāo)記：用于定義一行（3）<td>標(biāo)記：用于定義一個(gè)單元格（4）<caption>標(biāo)記：用于設(shè)置表格標(biāo)題（5）<th>標(biāo)記：用于設(shè)置表頭2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)4一、表格的標(biāo)記1、表格標(biāo)記的格式<tablewidth=“”border=“”summary=“”><tr><td>***</td>…</tr></table>例如：<tablewidth=“300”border=“1”summary=“成績(jī)”><tr><td>序號(hào)</td><td>名稱</td></tr></table>表示定義了一個(gè)寬300，邊距為1，一行兩列的表格。序號(hào)名稱2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)52、靜態(tài)表格設(shè)計(jì)舉例范例8-1制作一個(gè)電器產(chǎn)品價(jià)格表，如右圖：代碼如下：<html><head><title>表格標(biāo)記</title></head><body><tablewidth=“300"border="1"><caption>產(chǎn)品價(jià)格表</caption><th>名稱</th><th>單位</th><th>單價(jià)</th><tr><td>電視機(jī)</td><td>臺(tái)</td><td>3990</td></tr><tr><td>電冰箱</td><td>臺(tái)</td><td>1082</td></tr><tr><td>平板電腦</td><td>個(gè)</td><td>5190</td></tr></table></body></html>2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)6二、設(shè)置表格的顏色對(duì)表格進(jìn)行顏色設(shè)置，可以使用CSS樣式表。。范例8-2：程序代碼如下：<head><title>設(shè)置表格的顏色</title><styletype="text/css">table{color:#ff0000;/*表格文字顏色*/

background-color:#eeeeee;/*表格背景色*/

font-family:"宋體";/*表格字體*/}caption{font-size:16px;/*表格標(biāo)題字體大小*/

font-weight:bolder;/*表格標(biāo)題文字粗細(xì)*/}th{color:#005533;/*表格表頭顏色*/

background-color:#ffaa00/*表格表頭背景顏色*/}</style></head>運(yùn)行效果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)7三、設(shè)置表格的邊框同樣，用CSS樣式表，也可以控制表格的邊框。根據(jù)不同的要求，對(duì)表格和單元格可以應(yīng)用不同的邊框格式，既可以定義整個(gè)表格的邊框，也可以單獨(dú)針對(duì)單元格的邊框進(jìn)行定義。CSS的邊框?qū)傩钥梢苑謩e指定邊框的大小、顏色和類型進(jìn)行定義。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)8例如：border-width:1pxborder-style:solidborder-color:red也可以用一條語(yǔ)句綜合三個(gè)屬性的設(shè)置：border:1pxsolidred1、邊框的整體設(shè)置CSS控制的邊框?qū)傩园ǎ海?）border-width：設(shè)置邊框?qū)挾龋Ｓ弥禐?px、2px等（2）border-style：設(shè)置邊框樣式，值有solid、dashed、dotted、double、groove、ridge、inset和outset等（3）border-color：設(shè)置邊框顏色，值有red、green、blue等。或者用rgb(100,100,100)以及#000000。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)9例如：border-top:3pxsolidred;border-left:3pxsolidred;border-right:3pxdashedblack;border-bottom:3pxdashedblue;2、邊框的邊設(shè)置對(duì)邊框也可以針對(duì)邊框的四個(gè)邊單獨(dú)設(shè)置。其屬性如下：border-top:<寬度><樣式><顏色>/*設(shè)置上邊框*/border-bottom:<寬度><樣式><顏色>/*設(shè)置左邊框*/border-right:<寬度><樣式><顏色>/*設(shè)置右邊框*/border-left:<寬度><樣式><顏色>/*設(shè)置下邊框*/2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)103、范例8-3<styletype="text/css">table{color:#ff0000;/*表格文字顏色*/

background-color:#eeeeee;/*表格背景色*/

font-family:"宋體";/*表格字體*/

border-collapse:separate;/*表格邊框分開(kāi)不合并*/

border-spacing:5pt;/*相鄰單元格邊框的間距*/

border-top:1pxsolidred;/*表格的上邊框*/

border-left:2pxsolidred;/*表格的左邊框*/

border-right:3pxdashedblack;/*表格的右邊框*/

border-bottom:4pxdashedblue;/*表格的下邊框*/}caption{font-size:16px;/*表格標(biāo)題字體大小*/

font-weight:bolder;/*表格標(biāo)題文字粗細(xì)*/}th{color:#005533;/*表格表頭顏色*/

background-color:#ffaa00/*表格表頭背景顏色*/}</style>返回2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)11任務(wù)2動(dòng)態(tài)創(chuàng)建表格用DOM動(dòng)態(tài)創(chuàng)建表格也是一種常見(jiàn)的方法，這種方法比較適合于交互式，用戶可以根據(jù)自己的需要來(lái)創(chuàng)建。在JavaScript中，動(dòng)態(tài)創(chuàng)建表格分兩部分語(yǔ)句。（1）在<body>中的定義表格<bodyonload="createTable()"><tableid="tabId"></table></body>函數(shù)createTable()為調(diào)用創(chuàng)建表格的函數(shù)。tabId1為表格ID。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)12（2）在<script>中創(chuàng)建表格<bodyonload="createTable()"><tableid="tabId"></table></body>通常把創(chuàng)建表格的代碼設(shè)計(jì)為函數(shù)createTable()。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)13functioncreateTable(row,cell){vartab=document.createElement("table");//獲得表對(duì)象tabtab.setAttribute("width","300");//設(shè)置表格屬性

tab.setAttribute("height","20");tab.setAttribute("border","1");for(varx=0;x<row;x++){vartr=tab.insertRow(); for(vary=0;y<cell;y++){vartd=tr.insertCell();td.innerHTML="*****";}}document.getElementById("tabId").appendChild(tab);//添加到指定表tabId中}函數(shù)createTable()代碼：row和col分別為行列數(shù)。在JavaScript中，行列號(hào)是從0開(kāi)始（包括標(biāo)題行）。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)14<html><head><title>動(dòng)態(tài)創(chuàng)建表</title><scripttype="text/javascript";language="javascript">functioncreateTable(row,cell){vartab=document.createElement("table");//獲得表對(duì)象tabtab.setAttribute("width","300");//設(shè)置表格屬性tab.setAttribute("height","20");tab.setAttribute("border","1");for(varx=0;x<row;x++){vartr=tab.insertRow(); for(vary=0;y<cell;y++){vartd=tr.insertCell();td.innerHTML="單元格"+(x+1)+(y+1);}}document.getElementById("tabId1").appendChild(tab);//添加到指定tabId1表中

}</script>范例8-4：創(chuàng)建一個(gè)4行3列的表格。程序代碼如下：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)15</head><bodyonload="createTable(4,3)"><tableid="tabId1"><caption>表格標(biāo)題</caption></table></body></html>運(yùn)行效果：2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)16任務(wù)3動(dòng)態(tài)添加表格在網(wǎng)頁(yè)設(shè)計(jì)中，有些表格是動(dòng)態(tài)變化的，需要根據(jù)網(wǎng)頁(yè)運(yùn)行的變化情況來(lái)確定表格的內(nèi)容。例如報(bào)名表，是在網(wǎng)頁(yè)運(yùn)行時(shí)，不斷增加報(bào)名人數(shù)，顯示的行數(shù)隨時(shí)加多。添加表格所使用的方法：varrow=document.getElementById("tabId").insertRow(k);v1=document.createTextNode("***");varcell=row.insertCell(n);cell.appendChild(v1);row和cell為行和列對(duì)象；k和n分別表示添加到第幾行和第幾列；tabId為表格ID。2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)17例如：設(shè)計(jì)一個(gè)添加函數(shù)insTable()，在第1行添加一行內(nèi)容。functioninsTable(){

row=document.getElementById("tid1").insertRow(1);varv1=newArray(3);v1[0]=document.createTextNode("手機(jī)");v1[1]=document.createTextNode("個(gè)");v1[2]=document.createTextNode("3999");for(vari=0;i<v1.length;i++){varcell=row.insertCell(i);cell.appendChild(v1[i]);}}2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)18范例8-5：在“倉(cāng)庫(kù)庫(kù)存表”中，添加1行內(nèi)容在第1行位置。<html><head><title>動(dòng)態(tài)添加行</title><scripttype="text/javascript";language="javascript">functioninsTable(){varrow=document.getElementById("tid1").insertRow(1);varv1=newArray(3);v1[0]=document.createTextNode("手機(jī)");v1[1]=document.createTextNode("個(gè)");v1[2]=document.createTextNode("3999");for(vari=0;i<v1.length;i++){varcell=row.insertCell(i);cell.appendChild(v1[i]);}}</script></head><body><tablewidth="200"border="1"id="tid1"><caption>倉(cāng)庫(kù)庫(kù)存表</caption><th>名稱</th><th>單位</th><th>單價(jià)</th><tr><td>電視機(jī)</td><td>臺(tái)</td><td>5000</td></tr></table><buttononclick="insTable()">添加一行內(nèi)容</button></body></html>運(yùn)行效果：返回2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)19任務(wù)4修改單元格內(nèi)容用innerText或innerHTML設(shè)置該單元格的內(nèi)容。修改單元格內(nèi)容語(yǔ)句格式：vartab=document.getElementById("tabId");tab.rows[行].cells[列].innerHTML="值";例如：vartab=document.getElementById("tabId1");tab.rows[1].cells[2].innerHTML="99";2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)20范例8-6：如果要求把表中的價(jià)格3999修改為99。修改單元格內(nèi)容程序代碼如下：…functionmodCell(){vartab=document.getElementById("tid1");

tab.rows[1].cells[2].innerHTML="99";varv1=tab.rows[1].cells[2].innerHTML;alert(v1);}…<buttononclick="modCell()">修改內(nèi)容</button>…運(yùn)行效果：返回2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)21任務(wù)5刪除表格動(dòng)態(tài)刪除表格有刪除表格的行和單元格。deleteRow()用于刪除行。deleteCell()用于刪除單元格。1、刪除行vartab=document.getElementById("tid1");tab.deleteRow(2);2、刪除列vartab=document.getElementById("tid1");for(vari=0;i<tab.rows.length;i++){tab.rows[i].deleteCell(2);}2024年1月2日J(rèn)avaScript動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)22范例8-7：在一個(gè)表格中通過(guò)兩個(gè)按紐，分別刪除第2行和第2列。程序代碼：<html><head><title>動(dòng)態(tài)刪除行列</title><scripttype="text/javascript";language="javascript">functiondelRow(){vartab=document.getElementById("tid1");

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論