原型界面如下

具体功能

        1、下拉框：动态绑定数据库数据；

        2、“+”按钮：单击时，在该条项目的直接下方添加一条新的奖惩条目；

        3、“-”按钮：只有一条奖惩条目时，清空输入框内容，否则，删除该奖惩条目；

        4、取消按钮：单击刷新页面

        5、保存按钮：单击时，验证用户输入信息的正确性，将用户输入信息转换为json格式的数据，把json格式的数据异步提交给服务器

具体实现

页面元素内容(body内容)

代码

<div class="main">
        <div style="font-size:20px;font-weight:bold;">
            市直单位名称：
            <input id="cc1" class="easyui-combobox" style="font-size:20px" editable="false" data-options="
                panelHeight: ‘auto‘,
                valueField: ‘市直单位ID‘,
                textField: ‘市直单位名称‘,
                url: ‘AddInput.ashx?commander=City‘"
            />
        </div>

        <%--外层div--%>
        <div id="F" class="easyui-panel" style="height: 300px; width: 600px;"> 
            <%--内层div--%>
            <div id="S0" style="font-size:15px;"> 
                奖惩项目名称：
                <input id="txtAddName0" name="txtName" type="text" value="编辑" style="width: 150px" onclick="IfFull(this);"/>
                分数：
                <input id="txtAddCount0" name="txtCount" type="text" value="编辑" style="width: 150px" onclick="IfFull(this);"/>
                <input id="cmdAdd0" name="Add" type="button" value="+" style="width: 40px" onclick="AddRow(this.id);" />
                <input id="cmdDel0" name="Del" type="button" value="-" style="width: 40px;" onclick="DelRow(this.id);" />
            </div>
        </div>

        <div>
            <input type="button" value="保存" onclick="SaveAdd();" />
            <input type="button" value="取消" onclick="ReLoad();" />
        </div>
    </div>

        页面元素由3大块内容组成，具体看原型图，其中最为关键的内容就是第二部分，实现动态增加元素的功能，利用节点的克隆来实现。

“+”按钮功能的实现

代码

//添加新的奖惩项目
        function AddRow(id) {
            //获得内层div元素节点
            var sElementNode = document.getElementById(id).parentNode;

            //克隆一套新的标签元素(内层div)：奖惩名称和分数
            var clonedElementNode = sElementNode.cloneNode(true);

            //设置克隆的属性(id和value)   没有对克隆的属性进行设置也没有什么影响
            //1、获得新一套标签元素的统一标号
            var newId = parseInt($("input[value = ‘+‘]").length);
            //2、设置div的id
            clonedElementNode.id = "S" + newId;
            //3、设置div内部元素的属性
            clonedElementNode.childNodes.item(1).id = "txtAddName" + newId;
            $(clonedElementNode.childNodes.item(1)).val("编辑");
            clonedElementNode.childNodes.item(3).id = "txtAddCount" + newId;
            $(clonedElementNode.childNodes.item(3)).val("编辑");
            clonedElementNode.childNodes.item(5).id = "cmdAdd" + newId;
            $(clonedElementNode.childNodes.item(5)).val("+");
            clonedElementNode.childNodes.item(7).id = "cmdDel" + newId;
            $(clonedElementNode.childNodes.item(7)).val("-");

            //将克隆元素添加到外层Div中
            //1、外层div元素节点
            var fElementNode = sElementNode.parentNode;
            //2、添加
            if (fElementNode.lastChild == sElementNode) {
                //当前节点为最后一个元素节点
                fElementNode.appendChild(clonedNode);
            } else {
                //当前节点不是最后一个元素节点
                fElementNode.insertBefore(clonedElementNode, sElementNode.nextSibling);
            } 
        }

       对于克隆出来的元素的属性，可以重新定义，也可以不用，因为后面都是通过元素的class属性进行操作的。

“-”按钮功能的实现

代码

//删除选中的奖惩项目
        function DelRow(id) {
            //1、获取当前节点的内层div  
            var sElementNode = document.getElementById(id).parentNode;
            //2、获取当前节点的外层div
            var fElementNode = sElementNode.parentNode;
            //3、删除内层div
            if (fElementNode.childNodes.length > 3) {
                //a、元素节点大于2
                fElementNode.removeChild(sElementNode);
            } else {
                //b、只有一个元素节点
                $(sElementNode.childNodes.item(1)).val("");
                $(sElementNode.childNodes.item(3)).val("");
                $(sElementNode.childNodes.item(5)).val("+");
                $(sElementNode.childNodes.item(7)).val("-");
            }
        }

       这里对于是否只有一条奖惩条目的判断，用的是孩子节点，因孩子节点包括了所有的节点类型(文本节点，元素节点，注释节点)，所以，在代码中会看到3(注释为注释节点，注释的两边有相应的空格，分别为一个文本节点)

取消按钮功能的实现

代码

//取消按钮，重新加载页面
        function ReLoad() {
            window.location.href = "CityAddInput.aspx";
        }

保存按钮功能的实现

代码

//保存奖惩项目
        function SaveAdd() {
            //有效性验证
            if ($(‘#cc1‘).combobox(‘getText‘) == "") {
                alert("请选择市直单位名称！");
                return;
            }

            //获得奖惩项目的个数
            var txtNameCount = parseInt($("input[name=‘txtName‘]").length);
            //获得所有奖惩项目名称节点
            var txtAllName = document.getElementsByName("txtName");
            //获得所有奖惩项目分数节点
            var txtAllCount = document.getElementsByName("txtCount");

            //有效性输入的判断
            for (var i = 0; i < txtNameCount; i++){
                //奖惩项目名称不能为空
                if (txtAllName[i].value == "" || txtAllName[i].value=="编辑") {
                    alert("请编辑奖惩项目名称");
                    txtAllName[i].focus();
                    return;
                }
                //奖惩项目名称中不存在相同命名
                for (var j = i+1; j < txtNameCount; j++) {
                    if(txtAllName[i].value == txtAllName[j].value){
                        alert("奖惩项目名称不允许出现重复");
                        txtAllName[j].focus();
                        return;
                    }
                }

                //奖惩项目分数不能为空
                if (txtAllCount[i].value == "" || txtAllCount[i].value == "编辑") {
                    alert("请编辑奖惩项目分数");
                    txtAllCount[i].focus();
                    return;
                }
                //奖惩项目分数必须为数字
                if (!(IsNum(txtAllCount[i].value))) {
                    alert("请输入数字!");
                    txtAllCount[i].focus();
                    return;
                }
            }

            //定义对象，集中要传送的数据
            var objData = new Object();
            //获得市直单位id
            objData.id = $(‘#cc1‘).combobox(‘getValue‘);

            var array = new Array();
            //获得相应的奖惩项目名称和奖惩项目分数
            for (var i = 0; i < txtNameCount; i++) {
                var obj = new Object();
                obj.name = txtAllName[i].value;
                obj.count = txtAllCount[i].value;
                array.push(obj);
            }

            //集合每条奖惩项目
            objData.array = array;

            //解析字符串
            var strData = JSON.stringify(objData);

            //传送数据
            $.post("InsertAddInput.ashx", { type: "市直单位", strJson: strData }, function (data) {
                if(data == "true") {
                    alert("添加成功！");
                    //重新加载页面
                    window.location.reload();
                }else if(data=="false") {
                    alert("指标已存在，请核对信息重新添加！");
                } else {
                    alert("未知错误存在，导致添加失败！");
                }
            });
        }

        //数字的验证，正数，负数，小数，正数；true表示为数字，false表示不为数字
        function IsNum(num) {
            var reg = /^\-?([1-9]\d*|0)(\.[1-9]{1,3})?$/;
            return reg.test(num);
        }

       JSON.stringify(object)可以把一个对象转换为json数据格式的字符串

文本框获得焦点的相应代码

//点击编辑的时候如果内容为编辑的话那就把value值清空，如果不是的话证明人家已经编写了就不清空了
        function IfFull(txtElementNode) {
            if (txtElementNode.value == "编辑") {
                txtElementNode.value = "";
            }
        }

总结