基于jQuery实现的点击编辑按钮时传递参数到弹出层div

如图是演示效果

\

1、新建一个HTML页面，实例化一个表格

<div style="position:relative;float:left;left:14.6%;width:85%;margin-top:-403px;background:#fff;height:400px;border-bottom:3px double #2EAFBB;border-right:3px double #2EAFBB;">
       <p style="position:relative;left:10px;">
           <a id="addaccount" href="javascript:void(0)"><img alt="" width="20px" height="20px" src="${pageContext.request.contextPath }/index/menu/image/7.png"/><span style="position:relative;top:-4px;">新增账号</span></a>          
       </p>
      
       <p>
         
           <input type="text" placeholder="输入关键字" name="keyword_account" id="keyword_account" style="position:relative;left:50px;width:300px;height:30px;"/>
           <input onclick="queryAccountByKeyword();" type="button" name="submit" value="查询" style="position:relative;left:50px;width:100px;height:30px;background:#2EAFBB;border:1px solid #2EAFBB;cursor:pointer;"/>
          
       </p>
      
       <div style="width:100%;overflow-y:scroll;height:300px;position:relative;SCROLLBAR-DARKSHADOW-COLOR:#2EAFBB;">
       <%
               AccountDao accountdao = new AccountDaoImpl();
               List<Account> accountlist = accountdao.queryAllAccount();
               request.setAttribute("accountlist", accountlist);
         %>
         <table id="table" style="border:1px solid #2EAFBB;width:100%;" border="1" width="100%">
            <tr style="background:#FFFFCC;color:#2EAFBB;text-align:center;height:35px;font-weight:BOLD;font-size:20px;">
               <td width="5%">序号</td>
               <td width="10%">账户名</td>
               <td width="10%">密码</td>
               <td width="10%">角色</td>
               <td width="5%">年龄</td>
               <td width="5%">性别</td>
               <td width="10%">电话</td>
               <td width="10%">地址</td>
               <td width="15%">邮箱</td>
               <td width="10%">部门</td>
               <td width="5%">更新</td>
               <td width="5%">删除</td>
            </tr>
            <c:forEach items="${requestScope.accountlist }" var="account"  varStatus="num_account">
            <c:if test="${num_account.count%2==1 }">
            <tr style="background:#FFFF99;height:30px;text-align:center;font-size:14px;font-weight:BOLD;">
              
                  <td  width="5%">${num_account.count}</td>
                  <td id="" width="10%">${account.aname }</td>
                  <td id="ap" width="10%">
                     ******
                                  
                  </td>
                  <td id="" width="10%">
                       <c:if test="${account.rid==1 }">超级管理员</c:if>
                       <c:if test="${account.rid==2 }">管理员</c:if>
                       <c:if test="${account.rid==3 }">程序员</c:if>
                  </td>
                  <td id="" width="5%">${account.aage }</td>
                  <td id="" width="5%">
                    <c:choose>
                     <c:when test="${account.asex==0 }">
                                                          未知
                     </c:when>
                     <c:when test="${account.asex==1 }">
                                                          男
                     </c:when>
                     <c:when test="${account.asex==2 }">
                                                          女
                     </c:when>
                  </c:choose>
                  </td>
                  <td id="" width="10%">${account.aphone }</td>
                  <td id="" width="10%">${account.addr }</td>
                  <td id="" width="15%">${account.aemail }</td>
                  <td id="" width="10%">
                     <%
                         DepmentDao depmentdao1 = new DepmentDaoImpl();
                         List<Depment> dlist = depmentdao1.queryAllDepment();
                         request.setAttribute("dlist", dlist);
                      %>
                     <c:forEach items="${requestScope.dlist }" var="dlist">
                         <c:if test="${account.did==dlist.did }">
                            ${dlist.dname}
                         </c:if>
                     </c:forEach>
                  </td>
                  <td id="update_button" width="5%">
                     
                      <a title="编辑" id="updateaccount" href="javascript:void(0)"
                      onclick="showUpdateAccountDiv('${account.aid }','${account.aname }','${account.rid }','${account.apass }',
                      '${account.asex }','${account.aage }','${account.aphone }',
                      '${account.addr }','${account.aemail }','${account.did }','${account.aphoto }');">
                      <img alt="" src="${pageContext.request.contextPath }/index/account/edt.gif">编辑</a>
                  </td>
                  <td  id="${account.aid }" width="5%">
                      <%-- <form action="${pageContext.request.contextPath }/DeleteAccountServlet" method="get">
                          <input type="hidden" name="aid" value="${account.aid }">
                          <input type="submit" style="background:#fff;border:0px solid #fff;color:#2EAFBB;font-weight:BOLD;font-style:italic;font-size:15px;cursor:pointer;" value="删除">
                      </form> --%>
                      <a title="删除" href="javascript:void(0)" onclick="deleteAccount('${account.aid}')">
                      <img alt="" src="${pageContext.request.contextPath }/index/account/del.gif">删除</a>
                  </td>         
            </tr>
            </c:if>
            <c:if test="${num_account.count%2==0 }">
            <tr style="background:#FFCC99;height:30px;text-align:center;font-size:14px;font-weight:BOLD;">
              
                  <td  width="5%">${num_account.count}</td>
                  <td id="" width="10%">${account.aname }</td>
                  <td id="ap" width="10%">
                     ******
                                  
                  </td>
                  <td id="" width="10%">
                       <c:if test="${account.rid==1 }">超级管理员</c:if>
                       <c:if test="${account.rid==2 }">管理员</c:if>
                       <c:if test="${account.rid==3 }">程序员</c:if>
                  </td>
                  <td id="" width="5%">${account.aage }</td>
                  <td id="" width="5%">
                    <c:choose>
                     <c:when test="${account.asex==0 }">
                                                          未知
                     </c:when>
                     <c:when test="${account.asex==1 }">
                                                          男
                     </c:when>
                     <c:when test="${account.asex==2 }">
                                                          女
                     </c:when>
                  </c:choose>
                  </td>
                  <td id="" width="10%">${account.aphone }</td>
                  <td id="" width="10%">${account.addr }</td>
                  <td id="" width="15%">${account.aemail }</td>
                  <td id="" width="10%">
                     <%
                         DepmentDao depmentdao1 = new DepmentDaoImpl();
                         List<Depment> dlist = depmentdao1.queryAllDepment();
                         request.setAttribute("dlist", dlist);
                      %>
                     <c:forEach items="${requestScope.dlist }" var="dlist">
                         <c:if test="${account.did==dlist.did }">
                            ${dlist.dname}
                         </c:if>
                     </c:forEach>
                  </td>
                  <td id="update_button" width="5%">
                     

                  <!-- 注意，这里要仔细看，在点击编辑调用js函数时我们就要把参数传递到形参里面了-->
                      <a id="updateaccount" title="编辑" href="javascript:void(0)"
                      onclick="showUpdateAccountDiv('${account.aid }','${account.aname }','${account.rid }','${account.apass }',
                      '${account.asex }','${account.aage }','${account.aphone }',
                      '${account.addr }','${account.aemail }','${account.did }','${account.aphoto }');">
                         <img alt="" src="${pageContext.request.contextPath }/index/account/edt.gif">
                                                          编辑
                      </a>
                  </td>
                  <td  id="${account.aid }" width="5%">
                      <%-- <form action="${pageContext.request.contextPath }/DeleteAccountServlet" method="get">
                          <input type="hidden" name="aid" value="${account.aid }">
                          <input type="submit" style="background:#fff;border:0px solid #fff;color:#2EAFBB;font-weight:BOLD;font-style:italic;font-size:15px;cursor:pointer;" value="删除">
                      </form> --%>
                      <a title="删除" href="javascript:void(0)" onclick="deleteAccount('${account.aid}')">
                      <img alt="" src="${pageContext.request.contextPath }/index/account/del.gif">删除</a>
                  </td>         
            </tr>
            </c:if>
            </c:forEach>
         </table>
        </div>
    </div>

第二部，写好要打开的div弹出层页面，默认是不显示的，等到打开它的时候在显示

<div  id="updateaccountDiv" style="z-index:10000;display:none;width:750px;height:500px;border:1px solid #2EAFBB;position:absolute;top:100px;left:295px;background:#fff;">
        <div id="mou_head" style="width:100px; height:10px;z-index:10001; position:absolute;">这个是用来实现拖层</div>
        <div style="position:relative;margin:0px;padding:0px;background:#2EAFBB;width:100%;height:50px;">
           <a id="close_btn_account_update" href="javascript:void(0)" onclick="closeUpdateAccountDiv();"><img alt="" style="position:relative;border-radius:50%;top:10px;float:right;" title="点击关闭" src="${pageContext.request.contextPath }/index/menu/image/closebut.png"></a>
        </div>
        <div style="width:100%;height:100%;">
        <form id="updateAccountForm" action="" method="post">
           <p>
               <input id="aid_update" type="hidden" name="aid_update"/>              
               <label style="color:red;position:relative;left:20px;">*</label>
               <label style="position:relative;left:25px;color:#2EAFBB;font-size:15px;font-weight:BOLD;">账号昵称</label>
               <input id="aname_update" style="position:relative;left:40px;width:240px;height:30px;" type="text" name="aname_update"/>
              
               <label style="color:red;position:relative;left:70px;">*</label>
               <label style="position:relative;left:75px;color:#2EAFBB;font-size:15px;font-weight:BOLD;">账号角色</label>
               <select id="rid_update" style="position:relative;left:80px;width:240px;height:30px;" name="rid_update">
                  <c:forEach items="${requestScope.rolelist }" var="role" varStatus="num_role">
                    <option value="${role.rid }">${role.rname }</option>
                  </c:forEach>
               </select>          
           </p>
           <p>
               <label style="color:red;position:relative;left:20px;">*</label>
               <label style="position:relative;left:25px;color:#2EAFBB;font-size:15px;font-weight:BOLD;">账号密码</label>
               <input id="apass_update" style="position:relative;left:40px;width:240px;height:30px;" type="text" name="apass_update"/>
              
               <label style="color:red;position:relative;left:70px;">*</label>
               <label style="position:relative;left:75px;color:#2EAFBB;font-size:15px;font-weight:BOLD;">账号性别</label>
               <select id="asex_update" style="position:relative;left:80px;width:240px;height:30px;" name="asex_update">
                  <option value="0">未知</option>
                  <option value="1">男</option>
                  <option value="2">女</option>
               </select>     
           </p>
           <p>
               <label style="color:red;position:relative;left:20px;">*</label>
               <label style="position:relative;left:25px;color:#2EAFBB;font-size:15px;font-weight:BOLD;">账号年龄</label>
               <input id="aage_update" style="position:relative;left:40px;width:240px;height:30px;" type="text" name="aage_update"/>                  
           </p>
           <br>
           <p>
               <label style="color:red;position:relative;left:20px;">*</label>
               <label style="position:relative;left:25px;color:#2EAFBB;font-size:15px;font-weight:BOLD;">账号电话</label>
               <input id="aphone_update" style="position:relative;left:40px;width:240px;height:30px;" type="text" name="aphone_update"/>         
           </p>
           <p>
               <label style="color:red;position:relative;left:20px;">*</label>
               <label style="position:relative;left:25px;color:#2EAFBB;font-size:15px;font-weight:BOLD;">账号地址</label>
               <input id="aaddr_update" style="position:relative;left:40px;width:240px;height:30px;" type="text" name="aaddr_update"/>         
           </p>
           <p>
               <label style="color:red;position:relative;left:20px;">*</label>
               <label style="position:relative;left:25px;color:#2EAFBB;font-size:15px;font-weight:BOLD;">账号邮箱</label>
               <input id="aemail_update" style="position:relative;left:40px;width:240px;height:30px;" type="text" name="aemail_update"/>         
           </p>
           <p>
               <label style="color:red;position:relative;left:20px;">*</label>
               <label style="position:relative;left:25px;color:#2EAFBB;font-size:15px;font-weight:BOLD;">所属部门</label>
               <select id="did_update" name="did_update" style="position:relative;left:40px;width:240px;height:30px;">
                   <c:forEach items="${requestScope.depmentlist }" var="depment">
                       <option value="${depment.did}">${depment.dname }</option>
                    </c:forEach>
               </select>         
           </p>
           <p>
               <input type="submit" onclick="updateAccountByJquery();" title="确认提交" style="cursor:pointer;position:relative;left:115px;margin-top:30px;width:240px;height:30px;background:#2EAFBB;" value="确认修改"/>
               <!-- <button onclick="closeUpdateAccountDiv();" id="cancel_btn_account_update" title="取消" style="cursor:pointer;position:relative;left:230px;width:240px;height:30px;background:#2EAFBB;">取消</button> -->
               <a href="javascript:void(0)" style="position:relative;left:230px;width:240px;height:30px;top:10px;"><img alt="" title="取消" onclick="closeUpdateAccountDiv();" src="${pageContext.request.contextPath }/index/account/cancel.png"></a>         
           </p>
          
          
           <div id="uploadDiv_update" style="border:1px solid #2EAFBB;position:relative;left:480px;top:-110px;width:144px;height:35px;background:url(${pageContext.request.contextPath }/index/account/upload1.png) no-repeat;background-size:144px 35px;">
            
               <input id="uploadImg_update" name="uploadImg_update" onchange="javascript:setImagePreviewUpdate();" type="file" title="点击选择头像" style="width:144px;height:35px;opacity: 0;filter:alpha(opacity=0);cursor:pointer;border:1px solid #2EAFBB;">
              
           </div>
          
           <div id="localImg_update" style="border:1px solid #2EAFBB;position:relative;left:480px;top:-320px;width:144px;height:169px;">
                         
               <img alt="预览" title="预览头像" width="144px" height="169px" src="${pageContext.request.contextPath }/index/account/4.png" id="img_preview_update">
              
           </div>
           <script type="text/javascript" src="${pageContext.request.contextPath }/js/accountupdate.js"></script>
           </form>
        </div>
    </div>

第三部，写js方法来打开div并且传递参数这是最重要的了

function showUpdateAccountDiv(aid,aname,rid,apass,asex,aage,aphone,addr,aemail,did,aphoto)
  {
      var updateaccountDiv = document.getElementById("updateaccountDiv");
     
            var mou_head = document.getElementById('mou_head');
            updateaccountDiv.style.display = "block";
            //以下部分要将弹出层居中显示
            updateaccountDiv.style.left=(document.documentElement.clientWidth-updateaccountDiv.clientWidth)/2+document.documentElement.scrollLeft+"px";
            //updateaccountDiv.style.top =(document.documentElement.clientHeight-updateaccountDiv.clientHeight)/2+document.documentElement.scrollTop-50+"px";
            updateaccountDiv.style.top =100+"px";
 
            //以下部分使整个页面至灰不可点击
            var procbg = document.createElement("div"); //首先创建一个div
            procbg.setAttribute("id","mybg"); //定义该div的id
            procbg.style.background = "#000000";
            procbg.style.width = "100%";
            procbg.style.height = "100%";
            procbg.style.position = "fixed";
            procbg.style.top = "0";
            procbg.style.left = "0";
            procbg.style.zIndex = "500";
            procbg.style.opacity = "0.6";
            procbg.style.filter = "Alpha(opacity=70)";
            //背景层加入页面
            document.body.appendChild(procbg);
            document.body.style.overflow = "hidden"; //取消滚动条
 
            //以下部分实现弹出层的拖拽效果
            var posX;
            var posY;
            mou_head.onmousedown=function(e)
            {
                if(!e) e = window.event; //IE
                posX = e.clientX - parseInt(updateaccountDiv.style.left);
                posY = e.clientY - parseInt(updateaccountDiv.style.top);
                document.onmousemove = mousemove;
            }
            document.onmouseup = function()
            {
                document.onmousemove = null;
            }
            function mousemove(ev)
            {
                if(ev==null) ev = window.event;//IE
                updateaccountDiv.style.left = (ev.clientX - posX) + "px";
                updateaccountDiv.style.top = (ev.clientY - posY) + "px";
      }
      //设置传递的参数
      document.getElementById("aid_update").value=aid;
      document.getElementById("aname_update").value=aname;
      document.getElementById("rid_update").value=rid;
      document.getElementById("apass_update").value=apass;
      document.getElementById("asex_update").value=asex;
      document.getElementById("aage_update").value=aage;
      document.getElementById("aphone_update").value=aphone;
      document.getElementById("aaddr_update").value=addr;
      document.getElementById("aemail_update").value=aemail;
      document.getElementById("did_update").value=did;
      document.getElementById("img_preview_update").src="${pageContext.request.contextPath }/image"+aphoto;
      //document.getElementById("uploadImg_update").value=aphoto;
      //document.getElementById("img_preview_update").src="${pageContext.request.contextPath }/index/account/upload.png";
      //
  }

//这是用来预览图片的js

 //下面用于更新账户图片上传预览功能
       function setImagePreviewUpdate(avalue)
       {
           var docObj=document.getElementById("uploadImg_update");
          
           var imgObjPreview=document.getElementById("img_preview_update");
           if(docObj.files &&docObj.files[0])
           {
               //张宇乐自定义             
               var localImgId = document.getElementById("localImg_update");
               localImgId.style.display = 'block';
               var uploadDiv = document.getElementById("uploadDiv_update");
               //uploadDiv.style.display = 'none';
               //
               //火狐下，直接设img属性
               imgObjPreview.style.display = 'block';
               //docObj.style.display='none';
               imgObjPreview.style.width = '144px';
               imgObjPreview.style.height = '169px';
              
               //imgObjPreview.src = docObj.files[0].getAsDataURL();
               //$('#uploadImg').css('display','none');
               //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
               imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
           }
           else
           {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                var localImgId = document.getElementById("localImg_update");
                //必须设置初始大小
                localImgId.style.width = "144px";
                localImgId.style.height = "169px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try
                {
                    localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch(e)
                {
                     alert("您上传的图片格式不正确，请重新选择!");
                     return false;
                 }
                 imgObjPreview.style.display = 'none';
                 document.selection.empty();
            }
            return true;
      }