原型界面如下
具体功能
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 = "";
}
}