如图是演示效果
\
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;
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
