1、新生信息錄入系統該系統是一個簡單的信息雙向的交互系統，沒有大型的數據庫作為后臺的信息存儲， 而是基于Excel表格程序，對數據的雙向同步。通過應用HTML語言，通過調用ActiveX 控件，利用java語言完成的簡單操作。（主要應用的工具是Editplus軟件。）1.首先是Excel表格文件的生成：（指定生成到電腦D盤）01.1代碼編寫如下圖：主要源代碼如下Excel的雙向交互-延邊大學/javascript xlsxfunction createExcel()創建一個Exce l的應用對象 ActiveXvar xlobj = new ActiveXObject(Excel.Applicat

2、ion);var xlBook = xlobj.Workbooks.Add;/新增一個工作薄var excelSheet = xlBook.Worksheets(1);/拿到工作表/保存為excelSheet.SaveAs(d:、新生信息.xlsx);設置可見excelSheet.Application.Visible = true;點擊創建 Excel1.2運行：可以通過兩種方式進行運行，一是通過editplus進行預覽，二是找到生成的.html文件，通 過電腦瀏覽器打開。運行效果如圖：卻R：.g僵點在刨建Excel朝nr乂卜em 聞，町柏阪注意：運行時電腦會提醒ActiveX控件和本頁的其

3、他部分的交互可能不安全，是否允許，點擊是方可運行。通過單擊運行顯示的按鈕“點擊創建Excel”觀察計算機D盤的前后變化:I i_j | E I切Io，計SIR，本斑S(D：) ；)p鯨 包含到庫中 蕓拿 刻最新建文件笑,朝方司的名稱侈改日期起360安全泗器下茲2015/4/10 6:37文件 MS. ncw_mzzq_v62015/4/17 10:12文樺習庠山PPT2015/4/17 16:04Program Files (x86)2015/4/24 9:44直圖片QQMusicCacho2015/5/3 7:08舟丈sQQ接阪件2015/5/4 19:33文悴國迅雷下裁.Users2015

4、/3/20 10:23文行J皆樂國皿學v3.02014/12/30 15:28? Administrator每習2015/4/27 18:37癡計宜bl一秘高甚下裁2015/4/1 19:18文悻蚤練習2015/4/27 18:38V/inF仁 KBSfi (C：)j 本?B&fi (DQ960安紋癰下裁new_mz7q_v6PPTProgram Files (x8o)上 QQMusicCache山QQ接收文件山 Usersfe SS鑫字v3.0山練習題篇京下載 |朋r11個臆U畫練習毋與國亙下載Pre gram Files; (kB51 QQMu sic Cache 牛口個雌IN柑捌用淀 l

5、oInF 丈丈立史文丈文文丈文w組沮/包劄峰口 三辜，匾劃片昏S?fe目迅雷下裁小寫味a Administrator!計算機生本北瞄L -(D!)啊 我同曾學vM名稱除改日期.3 60宏至源昔下裁2015/4/10 6:37.new_mzzq_62015/4/17 10:12pp-2015/4/17 16:041. Program Files k36)2015/4/24 944.QQMusicCache2015/5；2 7:062015/5/4 19:33.Users2015/3/20 10:232014/12/30 15:2 BjO15/4；J71S:37.提間高晅下慈2&15/4/1 19

6、: IB2015/4/27 18:3 BJD15/5；: 0:04此上步驟我們便完成交互的第一步，Excel文件的創建，接下來我們就要進行前臺操作也面 的設計，以及數據交互的操作：2.頁面設計與數據交互2.1首先是對名稱的設定，以及文件瀏覽的實現信息管理-新生信息錄入系統選擇文件 學生信息表接下來是對按鈕與標題的設計，其中包括字體、背景顏色、頁面布局等的設定:.btnwidth:200px;height:36px;display:block;border:1px solid #0033ff;text-decoration:none;line-height:36px;text-align:cen

7、ter;color:#0033ff;margin:30px auto;border-radius:18px;.btn:hoverbackground:#0033ff;whitebodybackground:#003333;font-family:微軟雅黑；font-size:20px;color:#fff;.boxmargin:0 auto;width:680px;.box h1text-align:center;.titlemargin:0 auto;display: block;width:100px;height:40pxbackground:#0099FF;line-height:40

8、px;text-align:center;border:1px solid #0099FF;border-radius:40px;box-shadow:2px 5px 5px rgba(0,0,0,1);text-shadow:1px 5px 5px rgba(0,0,0,1);font-size:16px;function openBrows()document.getElementById(excelfile).click();var xlsxObj;var xlsxBook;var excelSheet;/function openExcel()xlsxObj = new ActiveX

9、Object(Excel.Application);var filePath = document.getElementById(excelfile).value;xlsxBook = xlsxObj.WorkBooks.open(filePath);excelSheet = xlsxBook.ActiveSheet;excelSheet.Application.Visible = true;fromExcel();/運行實現后的效果如下圖：信息管理-新生信息錄入系統通過點擊“選擇文件”按鈕打開文件，由于暫時沒有數據，因此暫時建立一 個Excel文件 student.xlsx來進行測試運行如圖

10、：I日保JQiLO LiEJITilOZiJHSidJC1WJ4&52MIS冏 L。17rfiLMl華見用204華A9 17dBJPir&8HTMLrtBAKMo口玲Fl，Users egg Excd?j*l=cHEjkH熾云EhimL.IManrHlJibmldkKB* : E;l逮古盤網nun rw Xsi)iiudBrt地 e*wJPEG 臥口口fl片 頌山心&“信息管理-新生信息錄入系統2.2下面是對數據項二維表的行的添加，以及二維表屬性的設計：設置一個按鈕“添加一行”添 加一行 定義二維表屬性欄： 序號 姓名 年齡 性別 學號 接下來是對相關屬性的設置tablemargin:0 au

11、to;border-spacing:0px;tdwidth:100px;height:40px;background:#ADADAD;border-right:1px solid #222220;text-align:center;color:black;border-top-radius:6px;.input_textwidth:100%height:40px;border:0px;background:#003366;color:#fff;border-radius:6px;text-align:center;對二維表添加行的設計function addRows()var tab = $(

12、dataTable);var rowIndex = tab.rows.length;var newTr = tab.insertRow(rowIndex);var noTd = newTr.insertCell(0); rowIndex+noTd.innerHTML = ;序號var nameTd = newTr.insertCell(1);nameTd.innerHTML = ;姓名 var ageTd = newTr.insertCell(2);ageTd.innerHTML = ;年齡var sexTd = newTr.insertCell(3);sexTd.innerHTML = ;v

13、ar QQTd = newTr.insertCell(4);學號id=txt4+rowIndex+QQTd.innerHTML = ;運行后得到的頁面效果:2.3實現主頁面數據與Excel表格數據的雙向交互:設置兩個個按鈕“同步數據到Excel”和“Excel同步數據到頁面”同步到 ExcelExcel 同步到頁面 接下來對屬性進行相應設置：function fromExcel()var i = 2;/var hasRow =true;/varvarvarfor str ;tab = $(dataTable);/獲取表格對象 rowCount tab.rows.length;(j rowCou

14、nt-1;j0;j-) tab.deleteRow(j);while (hasRow)/var newTr tab.insertRow(tab.rows.length);var noTd newTr.insertCell(O);/noTd.innerHTML ”;var nameTd newTr.insertCell(l);nameTd.innerHTML ”;var ageTd newTr.insertCell(2);ageTd.innerHTML ”;var sexTd newTr.insertCell(3);sexTd.innerHTML ”;var QQTd newTr.insertC

15、ell(4);QQTd.innerHTML ”;i+;if (excelSheet.Cells(i,1).Value undefined)hasRow false;/同步到excel function toExcel()var tab $(dataTable)alert($(txt02”).value);for(i-2;i， q L/A *f wg 可淡件 阻Z 期理,3“5EAi4b：MSK-JWflOftltUMJ擊.口時i1I1卻my4-壬滑W.2124XXM成功完成Excel數據與頁面的同步3.5接下來在頁面添加一行輸入數據：6 楊波 22男 21240063.6點擊“同步到Excel

16、LGst-nunbw Z124Q01 212400Z 2124003 212400-i 2124005 Z124006MindMange- Min-cjfft到Excel文件中查看是否運行成功:三=三*延BP mr m- 33 m-i. BJ 9.- DTK 目.目-B.- Q.o Q o o 3 22 2 2 2 2 2至 rlJe.slsA.消世波 一年：張工上街測試結果表明程序成功的運行了，實現了 Exce 1的雙向交互下面是完整的代碼:Excel 的雙向交互-zsqmeta name=Generator content=EditPlus .btnwidth:200px;height:3

17、6px;display:block;border:1px solid #0033ff;text-decoration:none;line-height:36px;text-align:center;color:#0033ff;margin:30px auto;border-radius:18px;.btn:hoverbackground:#0033ff;whitebodybackground:#003333;font-family:微軟雅黑“；font-size:20px;color:#fff;.boxmargin:0 auto;width:680px;.box h1text-align:ce

18、nter;.titlemargin:0 auto;display: block;width:100px;height:40pxbackground:#0099FF;line-height:40px;text-align:center;border:1px solid #0099FF;border-radius:40px;box-shadow:2px 5px 5px rgba(0,0,0,1);text-shadow:1px 5px 5px rgba(0,0,0,1);font-size:16px;tablemargin:0 auto;border-spacing:0px;tdwidth:100

19、px;height:40px;background:#ADADAD;border:1px solid #222220;text-align:center;color:black;border-radius:6px;.input_textwidth:100%height:40px;border:0px;background:#003366;color:#fff;border-radius:6px;text-align:center;/javascriptfunction createExcel()var xlobj = new ActiveXObject(Excel.Application);v

20、ar xlBook = xlobj.Workbooks.Add;/新增一個工作薄var excelSheet = xlBook.Worksheets();/excelSheet.SaveAs(e:zhao.xlsx);/excelSheet.Application.Visible = true;/function openBrows()document.getElementById(excelfile).click();var xlsxObj;var xlsxBook;var excelSheet;/function openExcel()xlsxObj = new ActiveXObject

21、(Excel.Application);var filePath = document.getElementById(excelfile).value;xlsxBook = xlsxObj.WorkBooks.open(filePath);excelSheet = xlsxBook.ActiveSheet; excelSheet.Application.Visible = true;fromExcel();/function fromExcel()var i = 2;/var hasRow =true;/ var str =;var tab = $(dataTable);/獲取表格對象var

22、rowCount = tab.rows.length;for (j= rowCount-1;j0;j)tab.deleteRow(j);while (hasRow)/var newTr = tab.insertRow(tab.rows.length);var noTd = newTr.insertCell(0);/noTd.innerHTML = ”;var nameTd = newTr.insertCell(1);nameTd.innerHTML = ”;var ageTd = newTr.insertCell(2);ageTd.innerHTML = ”;var sexTd = newTr.insertCell(3);sexTd.innerHTML = ”;var QQTd = newTr.insertCell(4);QQTd.innerHTML = ”;i+;if (excelSheet.Cells(i,1).Value = undefined)hasRow =false;/新增一行function addRows()var tab = $(dataTable);var rowIndex = tab.rows.length;va