学生信息录入系统Excel的双向交互赵世强.docx

1、学生信息录入系统Excel的双向交互赵世强新生信息录入系统该系统是一个简单的信息双向的交互系统，没有大型的数据库作为后台的信息存储，而是基于Excel表格程序，对数据的双向同步。通过应用HTML语言，通过调用ActiveX控件，利用java语言完成的简单操作。（主要应用的工具是Editplus软件。）1. 首先是Excel表格文件的生成：（指定生成到电脑D盘）。1.1 代码编写如下图：主要源代码如下 Excel的双向交互-延边大学 /javascript xlsx function createExcel() /创建一个Excel的应用对象 ActiveX var xlobj = new Ac

2、tiveXObject(Excel.Application); var xlBook = xlobj.Workbooks.Add;/新增一个工作薄 var excelSheet = xlBook.Worksheets(1);/拿到工作表 /保存为 excelSheet.SaveAs(d:新生信息.xlsx); /设置可见 excelSheet.Application.Visible = true; 点击创建Excel 1.2 运行：可以通过两种方式进行运行，一是通过editplus进行预览，二是找到生成的.html文件，通过电脑浏览器打开。运行效果如图：注意：运行时电脑会提醒ActiveX控件

3、和本页的其他部分的交互可能不安全，是否允许，点击是方可运行。通过单击运行显示的按钮“点击创建Excel”观察计算机D盘的前后变化：此上步骤我们便完成交互的第一步，Excel文件的创建，接下来我们就要进行前台操作也面的设计，以及数据交互的操作：2. 页面设计与数据交互2.1 首先是对名称的设定，以及文件浏览的实现 信息管理-新生信息录入系统 选择文件 学生信息表 接下来是对按钮与标题的设计，其中包括字体、背景颜色、页面布局等的设定：.btn width:200px; height:36px; display:block; border:1px solid #0033ff; text-decora

4、tion:none; line-height:36px; text-align:center; color:#0033ff; margin:30px auto; border-radius:18px; .btn:hoverbackground:#0033ff;white body background:#003333; font-family:微软雅黑“； font-size:20px; color:#fff; .box margin:0 auto; width:680px; .box h1 text-align:center; .title margin:0 auto; display: b

5、lock; width:100px; height:40px background:#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; function openBrows() document.getElementById(excelfile).click(); var xlsx

6、Obj; var xlsxBook; var excelSheet; / function openExcel() xlsxObj = new ActiveXObject(Excel.Application); var filePath = document.getElementById(excelfile).value; xlsxBook = xlsxObj.WorkBooks.open(filePath); excelSheet = xlsxBook.ActiveSheet; excelSheet.Application.Visible = true; fromExcel();/运行实现后

7、的效果如下图：通过点击“选择文件”按钮打开文件，由于暂时没有数据，因此暂时建立一个Excel文件student.xlsx来进行测试运行如图：2.2 下面是对数据项二维表的行的添加，以及二维表属性的设计： 设置一个按钮“添加一行” 添加一行 定义二维表属性栏： 序号 姓名 年龄 性别 学号 接下来是对相关属性的设置 table margin:0 auto; border-spacing:0px; td width:100px; height:40px; background:#ADADAD; border-right:1px solid #222220; text-align:center; c

8、olor:black; border-top-radius:6px; .input_text width:100% height:40px; border:0px; background:#003366; color:#fff; border-radius:6px; text-align:center; 对二维表添加行的设计 function addRows() var tab = $(dataTable); var rowIndex = tab.rows.length; var newTr = tab.insertRow(rowIndex); var noTd = newTr.insertC

9、ell(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 = ; var QQTd = newTr.insertCell(4); /学号 QQTd.innerHTML = ;运行后得到的页面效果：2.3 实现主页面数据与Excel表格数据的双向交

10、互：设置两个个按钮“同步数据到Excel”和“Excel同步数据到页面” 同步到Excel Excel同步到页面接下来对属性进行相应设置： function fromExcel() var i = 2;/ var hasRow =true;/ var str =; var tab = $(dataTable);/获取表格对象 var rowCount = tab.rows.length; for (j= rowCount-1;j0;j-) tab.deleteRow(j); while (hasRow)/ var newTr = tab.insertRow(tab.rows.length);

11、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

12、 = undefined) hasRow =false;/ /同步到excel function toExcel() var tab = $(dataTable) alert($(txt02).value); for(i=2;i=tab.rows.length;i+) excelSheet.Cells(i,1).Value = $(txt0+i).value; excelSheet.Cells(i,2).Value = $(txt1+i).value; excelSheet.Cells(i,3).Value = $(txt2+i).value; excelSheet.Cells(i,4).Va

13、lue = $(txt3+i).value; excelSheet.Cells(i,5).Value = $(txt4+i).value;运行后得到整体的页面效果：3. 已经完成全部的代码编写，接下来就是测试运行。3.1 首先选择文件3.2打开文件student.xlsx在Excel文件中显示的数据为3.3在Excel中添加一行数据： 5 赵世强 23 男 21240053.4在页面中点击“Excel同步到页面”成功完成Excel数据与页面的同步3.5接下来在页面添加一行输入数据：6 杨波 22 男 21240063.6点击“同步到Excel”到Excel文件中查看是否运行成功：测试结果表明程

14、序成功的运行了，实现了Excel的双向交互下面是完整的代码： Excel的双向交互-zsq .btn width:200px; height:36px; 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;white body background:#003333; font-famil

15、y:微软雅黑“； font-size:20px; color:#fff; .box margin:0 auto; width:680px; .box h1 text-align:center; .title margin:0 auto; display: block; width:100px; height:40px background:#0099FF; line-height:40px; text-align:center; border:1px solid #0099FF; border-radius:40px; box-shadow:2px 5px 5px rgba(0,0,0,1);

16、 text-shadow:1px 5px 5px rgba(0,0,0,1); font-size:16px; table margin:0 auto; border-spacing:0px; td width:100px; height:40px; background:#ADADAD; border:1px solid #222220; text-align:center; color:black; border-radius:6px; .input_text width:100% height:40px; border:0px; background:#003366; color:#ff

17、f; border-radius:6px; text-align:center; /javascript function createExcel() var xlobj = new ActiveXObject(Excel.Application); var xlBook = xlobj.Workbooks.Add;/新增一个工作薄 var excelSheet = xlBook.Worksheets();/ / excelSheet.SaveAs(e:zhao.xlsx); / excelSheet.Application.Visible = true; / function openBro

18、ws() document.getElementById(excelfile).click(); var xlsxObj; var xlsxBook; var excelSheet; / function openExcel() xlsxObj = new ActiveXObject(Excel.Application); var filePath = document.getElementById(excelfile).value; xlsxBook = xlsxObj.WorkBooks.open(filePath); excelSheet = xlsxBook.ActiveSheet;

19、excelSheet.Application.Visible = true; fromExcel();/ function fromExcel() var i = 2;/ var hasRow =true;/ var str =; var tab = $(dataTable);/获取表格对象 var 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.

20、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; var newTr = tab.insertRow(rowIndex); var noTd = newTr.insertCell(0); rowIndex+ noTd.innerHTML = ; /序号 var nameTd = newTr.insertCell(1);