写两个相同内容的DIV，巧妙实现表单模块的状态，在可编辑和不可编辑之间切换

来源：互联网发布：数据的统计编辑：程序博客网时间：2024/06/07 22:34

简单来说，两个相同的div，一个带文本框，一个不带文本框。点击时触发切换操作，隐藏其中一个，展示另外一个。

通过dom对象的display属性的none/block切换是否显示

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><jsp:include page="/base.jsp"></jsp:include><script type="text/javascript" src="<%=request.getContextPath()%>/js/uploadify/jquery.uploadify.min.js"></script><link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/uploadify/uploadify.css" /></head><body>    <div>        【基本人员信息】     </div>    <div id="buttons">      <a id="btn" onclick="updatabj()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">修改</a>        <a id="btn" onclick="showupdatabj()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">显示维护</a>         <a id="btn" onclick="" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查看人员信息</a>          <a id="btn" onclick="out2Execle()" class="easyui-linkbutton" data-options="iconCls:'icon-save'">导出execle到F盘根目录</a>   </div> <div id="hide">    <table id="shua"><tr><td align="right"><label style="color: blue;font-size: small;">职务编号: </label></td><td>${jbxx.cBh}</td><td align="right"><label style="color: blue;font-size: small;">头像: </label></td><td>        <input type = "file" name = "file_upload" id = "upload"/>                <img id = "img" src="" style = "width:50px; height:50px;"/>          </td></tr><tr><td align="right"><label style="color: blue;font-size: small;">姓名: </label></td><td>${jbxx.cName}</td><td align="right"><label style="color: blue;font-size: small;">曾用名: </label></td><td>${jbxx.cCym}</td></tr><tr><td align="right"><label style="color: blue;font-size: small;">性别: </label></td><td> ${jbxx.cXb==0?"女":""}  ${jbxx.cXb==1?"男":""} </td><td align="right"><label style="color: blue;font-size: small;">民族: </label></td><td>${jbxx.cMz}</td></tr><tr><td align="right"><label style="color: blue;font-size: small;">工作单位: </label></td><td>${jbxx.cGzdw}</td><td align="right"><label style="color: blue;font-size: small;">部门类别: </label></td><td>${jbxx.cBmlb}</td></tr><tr><td align="right"><label style="color: blue;font-size: small;">职务级别: </label></td><td>${jbxx.cZwjb}</td><td align="right"><label style="color: blue;font-size: small;">任职状态: </label></td><td>${jbxx.cRzzt==0?"在职":""}${jbxx.cRzzt==1?"离职":""}</td></tr><tr><td align="right"><label style="color: blue;font-size: small;">入党日期: </label></td><td>${jbxx.dJtrqStr}</td><td align="right"><label style="color: blue;font-size: small;">健康状况: </label></td><td>${jbxx.cJkzk==0?"健康":""}${jbxx.cJkzk==1?"不健康":""} ${jbxx.cJkzk==2?"带审查":""} </td></tr><tr><td align="right"><label style="color: blue;font-size: small;">居民身份证: </label></td><td>${jbxx.cZjhm}</td><td align="right"><label style="color: blue;font-size: small;">出生日期: </label></td><td>${jbxx.dCsrqStr}</td></tr><tr><td align="right"><label style="color: blue;font-size: small;">参加工作日期: </label></td><td>${jbxx.dCjzzsjStr}</td><td align="right"><label style="color: blue;font-size: small;">干部类别: </label></td><td>${jbxx.cGblb==0?"局级以上干部":""}${jbxx.cGblb==1?"局级干部":""}${jbxx.cGblb==2?"处级干部":""}${jbxx.cGblb==3?"科级干部":""}</td></tr><tr><td align="right"><label style="color: blue;font-size: small;">参加工作年限: </label></td><td>${jbxx.nGznx}</td><td align="right"><label style="color: blue;font-size: small;">用工形式: </label></td><td>${jbxx.cNdtjdw}</td></tr><tr><td align="right"><label style="color: blue;font-size: small;">现居所在地: </label></td><td>${jbxx.cJgProvince}</td><td align="right"><label style="color: blue;font-size: small;">籍贯: </label></td><td>${jbxx.cJgCity}</td></tr><tr><td align="right"><label style="color: blue;font-size: small;">出生地: </label></td><td>${jbxx.cCsdProvince}</td><td align="right"><label style="color: blue;font-size: small;">出生地补充: </label></td><td>${jbxx.cCsdCity}</td></tr></table></div><div id="show" style="display:none">      <form id="jibenxinxi">        <input type="hidden" id="yincang" name="cId" value="${jbxx.cId}"/><table><tr><td align="right"><label style="color: blue;font-size: small;">职务编号: </label></td><td><input style="width:180px;" type="text" name="cBh"  value="${jbxx.cBh}" class="easyui-textbox" /></td> <td align="right"><label style="color: blue;font-size: small;">头像: </label></td> <td><input type="button" name="cZp" value="请选择" onclick=""><img src="/i/eg_tulip.jpg"  alt="" /></td> </tr><tr><td align="right"><label style="color: blue;font-size: small;">姓名: </label></td><td><input style="width:180px;" type="text" name="cName"  value="${jbxx.cName}" class="easyui-textbox" /></td><td align="right"><label style="color: blue;font-size: small;">曾用名: </label></td><td><input style="width:180px;" type="text" name="cCym"  value="${jbxx.cCym}" class="easyui-textbox" /></td></tr><tr><td align="right"><label style="color:blue;font-size: small;">性别: </label></td> <td><input type="radio" ${jbxx.cXb==0?"checked":""} name="cXb" value="0"/>女<input type="radio" name="cXb" ${jbxx.cXb==1?"checked":""} value="1"/>男</td> <td align="right"><label style="color: blue;font-size: small;">民族: </label></td><td><input style="width:180px;" type="text" name="cMz"  value="${jbxx.cMz}" class="easyui-textbox" /></td></tr><tr><td align="right"><label style="color: blue;font-size: small;">工作单位: </label></td><td><input style="width:180px;" type="text" name="cGzdw"  value="${jbxx.cGzdw}" class="easyui-textbox" /></td><td align="right"><label style="color: blue;font-size: small;">部门类别: </label></td><td><input style="width:180px;" type="text" name="cBmlb"  value="${jbxx.cBmlb}" class="easyui-textbox" /></td></tr><tr><td align="right"><label style="color: blue;font-size: small;">职务级别: </label></td><td><input style="width:180px;" type="text" name="cZwjb"  value="${jbxx.cZwjb}" class="easyui-textbox" /></td><td align="right"><label style="color: blue;font-size: small;">任职状态: </label></td><td><input type="radio" name="cRzzt" ${jbxx.cRzzt==0?"checked":""} value="0"/>在职<input type="radio" name="cRzzt" ${jbxx.cRzzt==1?"checked":""} value="1"/>离职</td> </tr><tr><td align="right"><label style="color: blue;font-size: small;">入党日期: </label></td>         <td><input style="width:180px;" type="text" name="dJtrq"  value="${jbxx.dJtrqStr}" class="easyui-datebox" /></td> <td align="right"><label style="color: blue;font-size: small;">健康状况: </label></td> <td><input type="radio" name="cJkzk" ${jbxx.cJkzk==0?"checked":""} value="0" />健康<input type="radio" name="cJkzk" ${jbxx.cJkzk==1?"checked":""} value="1" />不健康<input type="radio" name="cJkzk" ${jbxx.cJkzk==2?"checked":""} value="2" />带审查</td> </tr><tr><td align="right"><label style="color: blue;font-size: small;">居民身份证: </label></td><td><input style="width:180px;" type="text" name="cZjhm"  value="${jbxx.cZjhm}" class="easyui-numberbox" /></td><td align="right"><label style="color: blue;font-size: small;">出生日期: </label></td><td><input style="width:180px;" type="text" name="dCsrq"  value="${jbxx.dCsrqStr}" class="easyui-datebox" /></td>  </tr><tr><td align="right"><label style="color: blue;font-size: small;">参加工作日期: </label></td><td><input style="width:180px;" type="text" name="dCjzzsj"  value="${jbxx.dCjzzsjStr}" class="easyui-datebox" /></td><td align="right"><label style="color: blue;font-size: small;">干部类别: </label></td><td><select name="cGblb"><option value="0" ${jbxx.cGblb==0?"selected":""}>局级以上干部</option><option value="1" ${jbxx.cGblb==1?"selected":""}>局级干部</option><option value="2" ${jbxx.cGblb==2?"selected":""}>处级干部</option><option value="3" ${jbxx.cGblb==3?"selected":""}>科级干部</option></select></td> </tr><tr><td align="right"><label style="color: blue;font-size: small;">参加工作年限: </label></td><td><input style="width:180px;" type="text" name="nGznx"  value="${jbxx.nGznx}" class="easyui-numberbox" /></td><td align="right"><label style="color: blue;font-size: small;">用工形式: </label></td><td><input style="width:180px;" type="text" name="cNdtjdw"  value="${jbxx.cNdtjdw}" class="easyui-textbox" /></td></tr><tr><td align="right"><label style="color: blue;font-size: small;">现居所在地: </label></td><td><input style="width:180px;" type="text" name="cJgProvince"  value="${jbxx.cJgProvince}" class="easyui-textbox" /></td><td align="right"><label style="color: blue;font-size: small;">籍贯: </label></td><td><input style="width:180px;" type="text" name="cJgCity"  value="${jbxx.cJgCity}" class="easyui-textbox" /></td></tr><tr><td align="right"><label style="color: blue;font-size: small;">出生地: </label></td><td><input style="width:180px;" type="text" name="cCsdProvince"  value="${jbxx.cCsdProvince}" class="easyui-textbox" /></td><td align="right"><label style="color: blue;font-size: small;">出生地补充: </label></td><td><input style="width:180px;" type="text" name="cCsdCity"  value="${jbxx.cCsdCity}" class="easyui-textbox" /></td></tr></table></form></div><script type="text/javascript">//图片上传$(document).ready(function(){        $("#upload").uploadify({swf:"<%=request.getContextPath()%>/js/uploadify/uploadify.swf",uploader:"<%=request.getContextPath()%>/updHeadImage.do",fileObjName:"uploadFile",  // 控制器中参数名称enctype:"multipart/form-data",auto:true,fileSizeLimit:"1024KB",fileTypeExts:"*.jpg;*.gif;*.png;",onUploadSuccess:function(file, result, response) {// 设置图片路径$("#img").attr("src",result);}});                });//导出人员信息到execlefunction out2Execle(){alert(out2Execle)$.ajax({url:"<%=request.getContextPath()%>/out2Execle.do",type:"post",dataType:"json",success:function (data){if (data) {alert("导出成功，进入F盘根目录查看")}},error:function (){alert("out2Execle 系统错误");}})}    //修改.style.display='block';function updatabj(){ var  rensid = $("#yincang").val(); var display =$('#hide').css('display');  if(display =='none'){$.ajax({url:"<%=request.getContextPath()%>/updRensdatad.do",type:'post',data:$("#jibenxinxi").serialize(),success:function(data){//切换div，实现能否编辑之间的切换展示。要隐藏的不可编辑，要展示的带文本框，可编辑。//把id为show的DIV隐藏 document.getElementById("show").style.display='none';//把id为hide的DIV作为block块显示，这里也可以写成display='table' document.getElementById("hide").style.display='block'; location.href='<%=request.getContextPath()%>/torenYanjibendata.do?cid='+rensid;}});    }}       //显示修改     function showupdatabj(){    document.getElementById("show").style.display='block'; document.getElementById("hide").style.display='none';    }</script></body></html>

阅读全文

0 0