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 添加日期后程序的运行界面

上一章目录下一章