3.4 JQuery综合实例
3.4.1 需求描述
创建HTML页面，实现员工信息的录入功能。员工信息包括姓名、性别、身份证号码、基本工资和工作经历信息（时间段、公司名称、职务、主要工作及职责、证明人），具体要求如下：
（1）时间段应引用JQuery日期插件。
（2）可以实现同时录入多条工作经历信息的功能。
（3）可以对工作经历信息进行移除。
3.4.2 分析与实现
整个页面分为2块区域，即员工基本信息录入区域和工作经历录入区域。员工基本信息录入区域主要用于放置员工基本信息的录入控件，即放置姓名、性别、身份证和基本工资等信息的录入控件；工作经历录入区域则用于放置工作经历的相关信息录入控件，即放置时间段、公司名称、职务、主要工作及职责、证明人等信息的录入控制。界面的布局设置如图3-6所示。
图3-6 界面的布局设置
小贴士
图中的“+”可以动态地添加行，为增加新的工作经历信息的添加控件；图中的“×”可以删除所在的行，但不能删除第1行。
实现步骤如下：
（1）新建一个名为“JQuery综合实例”的HTML页面。
（2）从解决方案的Scripts文件夹中将JQuery类库添加到页面的＜head＞＜/head＞之间，VisualStudio2013生成的代码如下：
＜script src=＂Scripts/jquery-1.10.2.min.js＂＞＜/script＞
（3）添加学生基本信息录入控件的样式表如下：
＜style type=＂text/css＂＞
input{ /*设置input标签的样式*/
border: 1px solid black; /*将边框的宽度设置为1px，黑色、实线*/
}
.title { /*员工基本信息标准样式*/
width: 80px;
}
.rowInfo {
margin-bottom: 5px;
clear: both; /*清除前面控件的左漂浮效果*/
}
＜/style＞
（4）添加学生基本信息录入控件。
＜div class=＂rowInfo＂＞
＜div class=＂title＂＞＜span＞姓名：＜/span＞＜/div＞＜div＞＜input id=＂name
＂name=＂name＂ /＞＜/div＞
＜div class=＂title＂＞＜span＞性别：＜/span＞＜/div＞＜div＞＜input type=＂radio＂
checked=＂checked＂ name=＂gender＂＞男＜/input＞
＜input type=＂radio＂ name=＂gender＂＞女＜/input＞＜/div＞
＜/div＞
＜div class=＂rowInfo＂＞
＜div class=＂title＂＞＜span＞身份证：＜/span＞＜/div＞＜div＞＜input id=＂id＂
name=＂id＂ /＞＜/div＞
＜div class=＂title＂＞＜span＞基本工资：＜/span＞＜/div＞＜div＞＜input id=＂salary＂
name=＂salary＂ /＞＜/div＞
＜/div＞
（5）程序的运行界面如图3-7所示。
图3-7 程序的运行界面
（6）添加工作经历录入控件样式。
a { /*设置超链接的样式*/
text-decoration:none; /*去掉下划线*/
}
.tbl {
border-top: 1px solid black; /*将上边框的宽度设置为1px，黑色、实线*/
border-left: 1px solid black; /*将左边框的宽度设置为1px，黑色、实线*/
clear: both; /*清除其他控件的漂浮效果*/
margin-top: 50px; /*设置下边界为50像素*/
}
.tbl td { /*设置工作经历表中单元格的样式*/
border-right: 1px solid black;
border-bottom: 1px solid black;
text-align:center; /*内容居中*/
height:25px;
}
.date { /*日期录入框的样式*/
width:59px;
}
（7）根据需求，用户可以录入多条工作经历，类似的多信息录入采用table标签进行布局，可以大大地简化实现的难度，HTML代码如下所示。
＜table border=＂0＂ id=＂tblWorkExperience＂ class=＂tbl＂ cellpadding=＂0＂
cellspacing=＂0＂＞
＜thead＞＜tr＞＜td colspan=＂6＂＞工作经历＜/td＞＜/tr＞＜/thead＞
＜tr＞
＜td width=＂160px＂＞时间段＜/td＞＜td width=＂130px＂＞公司名称＜/td＞
＜td width=＂100px＂＞职务＜/td＞＜td width=＂200px＂＞主要工作及职责＜/td＞
＜td width=＂100px＂＞证明人＜/td＞
＜td width=＂70px＂＞操作(＜a href=＂#＂onclick=＂addRow()＂＞+＜/a＞)＜/td＞＜/tr＞
＜tr id=＂r_1＂＞
＜td＞从＜input id=＂txtFromDate_1＂onclick=＂WdatePicker()＂class=＂date＂/＞
到＜input id=＂txtToDate_1＂ class=＂date＂ onclick=＂WdatePicker()＂ /＞
＜/td＞
＜td＞＜input id=＂txtCompanyName_1＂ /＞＜/td＞
＜td＞＜input id=＂txtPostion_1＂ /＞＜/td＞
＜td＞＜input id=＂txtResponsibility_1＂ /＞＜/td＞
＜td＞＜input id=＂txtWitness_1＂＞＜/td＞
＜td＞＜a href=＂#＂onclick=＂return false; ＂style=＂color:gray; ＂title=
＂删除＂＞×＜/a＞＜/td＞
＜/tr＞
＜/table＞
小贴士
上述代码应写在＜body＞＜/body＞标签内、最后一个＜/div＞标签之后。
代码中的＂_1＂作为行序号的标识，代表第1行；代码块“onclick=＂WdatePicker（）＂”将为控件注入日期选择功能。
（8）运行界面如图3-8所示。
图3-8 添加工作经历后程序的运行界面
（9）当用户单击图3-9中的“+”时，页面将自动在工作经历列表中增加一行工作经历录入控件，使用JQuery的append方法可向＜table＞＜/table＞标签中增加行，代码如下：
＜script type=＂text/javascript＂＞
var rowCounter =1; //工作经历表的行计数器，用于标识行序列号，并作为ID的组成部分，其值只增不减
function addRow(){
rowCounter++; //行号加1
$(＂#tblWorkExperience＂).append(＇＜tr id=＂r_＇ +rowCounter
+＇＂＞＜td＞从＜input onclick=＂WdatePicker()＂ id=＂txtFromDate_＇
+rowCounter+＇＂class=＂date＂/＞到＜input onclick=＂WdatePicker()＂
id=＂txtToDate_＇ +rowCounter
+＇＂ class=＂date＂ /＞＜/td＞＜td＞＜input id=＂txtCompanyName_＇
+rowCounter+＇＂/＞＜/td＞＜td＞＜input id=＂txtPostion_＇
+rowCounter +＇＂/＞＜/td＞＜td＞＜input id=＂txtResponsibility_＇
+rowCounter +＇＂/＞＜/td＞＜td＞＜input id=＂txtWitness_＇
+rowCounter +＇＂＞＜/td＞＜td＞＜a href=＂#＂ onclick=＂removeRow(＇
+rowCounter +＇)＂ title=＂删除＂＞×＜/a＞＜/td＞＜/tr＞＇);
}
＜/script＞
（10）上述代码已实现添加工作经历行的功能，当然也可以移除行中的控件，在addRow方法后添加removeRow方法，使其具备根据行标识移除行标签的功能，代码如下：
//根据行序号移除工作经历表中的行
function removeRow(rowIndex) {
if (confirm(＂真的打算移除吗？＂)) {
$(＂#r_＂ +rowIndex).remove();
}
}
（11）添加日期控件。基于B/S的日期控件需要自定义控件，JQuery联盟提供了大量开源、免费的日期控件，可以从http://jqueryui.com/下载得到。本书采用的是My97DatePicker日期控件，可以从http://www.my97.net/下载。
（12）将下载的整个DatePicker包复制到Scripts文件夹中，再在“JQuery综合实例． html”文件的JQuery引用后添加对其文件的引用，代码如下：
＜script src=＂Scripts/My97DatePicker/WdatePicker.js＂＞＜/script＞
（13）程序的运行界面如图3-9所示。
图3-9 添加日期后程序的运行界面