这个项目我们采用快速开发的方式，首先欢哥给我们每人分配了一个技术难点，让大家去研究，我负责的是动态添加/删除一行。这个技术点完成之后只能说是勉强能用吧，ie8以下的都支持不了，不过从我自己看来确实是挺有成就感，毕竟第一个任务嘛，下面跟大家分享一下
先来对整个页面做个简单的介绍，可以在0基础完全新建指标，也可以在之前的基础上进行修改，这次主要给大家说新建指标的功能，大家看到后边的+，-按钮了没？我的任务就是点击+按钮时在当前的位置后边添加一行，也就是说我点了第二行的+号那我就要在2，3行之间添加一行；其中的点击选择责任单位按钮后是个多选下拉框，当时实现克隆的时候废了我不少劲，试了很多种方法最后解决了，只是基本功能还不够完善，呵呵。还有点击-按钮时删除当前的行。
基础代码
<form id="form2" runat="server">
<div id="Add">
<input id="ButAddnew" type="button" value="新建指标" />
<input id="ButAddOld" type="button" value="基于往年进行修改" />
注意:点击选择某一年份,在此基础上进行修改
</div>
<div id="Inquire">
<span id="year">年份：</span>
<select class="easyui-combobox" name="state" style="width: 200px;">
<option value=""></option>
<option value=""></option>
</select>
指标类型:
<select class="easyui-combobox" name="state" style="width: 200px;">
<option value=""></option>
<option value=""></option>
</select>
</div>
<div class="myPanle">
<div id="p" class="easyui-panel" style="height: 380px; width: 1200px;">
<div id="DIV0" class="index">
<div style="float:left;"> 指标名称:
<input id="txtName" type="text" style="width: 225px"/> 单位:
<%--<select name="com" style="width: 60px;display:block;">--%>
<select class="combobox" name="state" style="width: 60px;">
<option value="BFH" selected="selected">%</option>
<option value="Y">亿</option>
<option value="BJ">编辑</option>
</select>
</div>
<div id="bb0" style="float:left;" οnmοuseοut="hide1(this.id);">
责任单位:
<input id = "aaa0"type="button" class="selectUnit" value="点击选择责任单位"style="width:158px" οnmοuseοver="show1(this.id);" />
<div id="ccd0" class= "vidcheck"style="width:156px;height:150px;"οnmοuseοver="show1(this.id);">
<input type="checkbox" name="check" value="01"/><span>责任单位1</span><br/>
<input type="checkbox" name="check" value="02"/><span>责任单位2</span><br/>
<input type="checkbox" name="check" value="03"/><span>责任单位3</span><br/>
<input type="checkbox" name="check" value="04"/><span>责任单位4</span><br/>
<input type="checkbox" name="check" value="05"/><span>责任单位5</span>
</div>
</div>
<div style="float:left;">
权重:
<input id="ButEweight" type="text" value="编辑" style="width: 50px" οnclick="ifNull(this);"/>
计算公式:
<input id="ButErul" type="text" value="编辑" style="width: 200px" οnclick="ifNull(this);"/>
<input id="0" name="Add" type="button" value="+" style="width: 40px" οnclick="addRow(this.id);" />
<input id="input0" name="Del" type="button" value="-" style="width: 40px;" οnclick="delRow(this.id);" />
</div>
</div>
</div>
</div>
<div class="bottom">
<span class="button">
<input id="ButSave" type="button" value="保存" />
<input id="ButCancle" type="button" value="取消" />
</span>
</div>
</form>
<head id="Head1" runat="server">
<title></title>
<link href="CSS/demo.css" rel="stylesheet" type="text/css" />
<link href="CSS/easyui.css" rel="stylesheet" type="text/css" />
<link href="CSS/icon.css" rel="stylesheet" type="text/css" />
<link href="CSS/myCss.css" rel="stylesheet" type="text/css" />
<script src="JS/Jquery1.8.3%20.js"type="text/javascript"></script>
<script src="JS/jquery.easyui.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
//定义按钮+的的初始id值
var i = 1;
//添加一个DIV
function addRow(id) {
var pnode = document.getElementById(id).parentNode; //当前节点的父节点
var divnode = pnode.parentNode; //当前div节点 如：id=DIV0的节点
var allnode = divnode.parentNode; //当前id=p节点
//获取最后一个divx的子节点div节点
// var lastP = allnode.lastChild.previousSibling.childNodes.item(1);
// //获取最后一个div的p节点的+按钮节点
// var addIdlast = lastP.childNodes.item(14).id;
//通过索引获得最后一个p节点的按钮+的id值，并使其+1，作为克隆的+按钮的id值(最后没有这种方法)
// var addIdnew = parseInt(addIdlast) + 1;
//通过获取+按钮的个数来取得将要克隆的+的按钮的id值
var addIdnew = parseInt($("input[value = '+']").length);
//获得按钮+的id值
var addId = id;
//通过拼接字符串的方式获得将要被克隆的div的id值
var DivId = "DIV" + addId;
//通过拼接字符串的方式获得将要被克隆的div中的-按钮的id值
var delIdNew = "input" + addIdnew;
//为了使将要克隆的div的id后边的值加1
//var addIdnew = parseInt(addId) + 1;
//同过拼接字符串的方式获得将要克隆的div的id值
var DivIdNew = "DIV" + addIdnew;
var aaaIdNew = "aaa" + addIdnew;
var ccdIdNew = "ccd" + addIdnew;
var bbIdNew = "bb" + addIdnew;
// 获得被克隆的节点对象
var sourceNode = document.getElementById(DivId);
// 克隆节点
var clonedNode = sourceNode.cloneNode(true);
//更新克隆div节点的id
clonedNode.setAttribute("id", DivIdNew);
//判断被克隆的divx是否是最后一个divx，如果是的话就直接在后边插入克隆的divx;否则就要在被克隆的divx节点的后边的兄弟节点的前边插入
if (allnode.lastChild == divnode) {
// 在父节点插入克隆的节点
sourceNode.parentNode.appendChild(clonedNode);
} else {
allnode.insertBefore(clonedNode, divnode.nextSibling);
}
//获取克隆好的整个div节点
var divNodenew = document.getElementById(DivIdNew);
//通过索引获得divNode节点的下一级节点,为了获取ccd
var pNodenew = divNodenew.childNodes.item(3);
//通过索引获得divNode节点的下一级节点,为了获取+,-
var ppNodenew = divNodenew.childNodes.item(5);
//通过索引获得divNode节点的下一级节点,为了获取txtName节点；
var pppNodenew = divNodenew.childNodes.item(1);
$(divNodenew.childNodes.item(3)).attr('id', bbIdNew);//修改bb节点的id
$(ppNodenew.childNodes.item(5)).attr('id', addIdnew); //修改+节点的id
$(ppNodenew.childNodes.item(7)).attr('id', delIdNew); //修改-节点的id
$(pNodenew.childNodes.item(1)).attr('id', aaaIdNew); //修改aaa节点的id
$(pNodenew.childNodes.item(3)).attr('id', ccdIdNew); //修改ccd节点的id
// 清空checkbox的checked
var bothernode = document.getElementById(aaaIdNew).nextSibling.nextSibling;
//让下拉框显示
document.getElementById(ccdIdNew).visible = true;
var childarray = bothernode.getElementsByTagName("input");
for (var i = 0; i < childarray.length; i++) {
childarray[i].checked = false;
}
document.getElementById(ccdIdNew).visible = false;
//将被克隆的div中的id=txtName,id=ccd,id=ButEweight,id=ButErul的
$(pppNodenew.childNodes.item(1)).val("");
$(pppNodenew.childNodes.item(3)).val("BFH");
$(ppNodenew.childNodes.item(1)).val("编辑");
$(ppNodenew.childNodes.item(3)).val("编辑");
}
//删除一行div
function delRow(id) {
//获取当前-按钮
var delNode = document.getElementById(id);
//获取当前节点的父节点的父节点即为divx节点
var delDiv = delNode.parentNode.parentNode;
//判断当前div节点是不是id=p的节点的第一个孩子节点，如果是的话-按钮起到的作用是将刚刚编辑的所有内容清空
if (delDiv.previousSibling == delDiv.parentNode.firstChild) {
var changetxtNameNode = delDiv.childNodes.item(1);
//通过索引获得delDiv节点的下一级节点,为了获取input节点
var xNode = delDiv.childNodes.item(3).childNodes.item(3);
//让下拉框显示
xNode.visible = true;
var childarray = xNode.getElementsByTagName("input");
//清除checkbox的checked属性
for (var i = 0; i < childarray.length; i++) {
childarray[i].checked = false;
}
xNode.visible = false;
var ppNodenew = delDiv.childNodes.item(5);
$(changetxtNameNode.childNodes.item(1)).val("");
$(changetxtNameNode.childNodes.item(3)).val("BFH");
$(ppNodenew.childNodes.item(1)).val("编辑");
$(ppNodenew.childNodes.item(3)).val("编辑");
} else {
$(delDiv).remove();
}
}
</script>
<script type="text/javascript">
//实现选择责任单位的功能
//多选下拉列表框,鼠标划过显示多选框，鼠标离开隐藏多选框
function show1(fid) {
var cid = "#" + fid;
$(cid).parent().find('div').removeClass("vidcheck").addClass("vidcheck1");
}
function hide1(fid) {
var cid = "#" + fid;
$(cid).find('div').removeClass("vidcheck1").addClass("vidcheck");
}
//点击编辑的时候如果内容为编辑的话那就把value值清空，如果不是的话证明人家已经编写了就不清空了
function ifNull(txtNameNode) {
if (txtNameNode.value =="编辑") {
txtNameNode.value = "";
}
}
</script>
</head>
body {
}
.myPanle
{
width:auto;
margin-left:auto;
margin-right:auto;
text-align :center;
}
.panel
{
margin:auto;
}
.button
{
width:70px;
text-align:center;
margin-left :465px;
}
#ButSave,#ButCancle
{
font-size:20px;
/* margin-bottom :20px;*/
}
.bottom
{
margin-bottom :10px;
margin-top :10px;
}
#ButAddnew,#year
{
margin-left:150px;
}
#Add,#Inquire,#p
{
margin-top :20px;
}
.vidcheck
{
display:none;
margin-left:65px;
z-index:100;
overflow:visible;
position:fixed;
background-color:Gray;
border:solid 1px;
margin-top:0px;
}
.vidcheck1
{
margin-top:0px;
margin-left:65px;
z-index:100;
overflow:visible;
position:fixed;
background-color:Gray;
border:solid 1px;
display:block;
}
.index
{
margin-top:10px;
margin-bottom:10px;
}
剩下的引用的文件都是easyUi的了，大家可以在官网上找到我就不一一展示了。
怎么样，不错吧？哈哈，还有很多不足，只能算是自慰+鼓励吧！
3088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
