困惑了两天的js，今天早上终于搞定了！
现在直接来正题....
先看看效果图：
下面是一个jsp..
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 7 <title>无标题文档</title> 8 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin/user/admin-userUI.css" charset="UTF-8" /> 9 <script type="text/javascript" src="${pageContext.request.contextPath}/libs/My97DatePicker/WdatePicker.js" charset="UTF-8"></script> 10 </head> 11 12 <body> 13 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 14 <tr> 15 <td height="30"> 16 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 17 <tr> 18 <td width="15" height="30"><img src="${pageContext.request.contextPath}/img/admin/backstage-img/tab_03.gif" width="15" height="30" /></td> 19 <td width="1101" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_05.gif"><img src="${pageContext.request.contextPath}/img/admin/backstage-img/311.gif" width="16" height="16" /> <span class="STYLE4">角色信息列表</span></td> 20 <td width="281" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_05.gif"></td> 21 <td width="14"><img src="${pageContext.request.contextPath}/img/admin/backstage-img/tab_07.gif" width="14" height="30" /></td> 22 </tr> 23 </table> 24 </td> 25 </tr> 26 <tr> 27 <td> 28 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 29 <tr> 30 <td width="9" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_12.gif"> </td> 31 <td bgcolor="#f3ffe3"> 32 <table width="99%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98" onmouseover="changeto()" onmouseout="changeback()"> 33 <tr> 34 <td width="8%" height="18" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_14.gif" class="STYLE1"> 35 <div align="center" class="STYLE2 STYLE1"> 36 <form id="searchRoleForm" action="${pageContext.request.contextPath}/admin_role/admin-roleSearchList" method="post"> 37 名称: <input type="text" id="searchValueId" name="role.name" style="width: 200px;" /> 38 <input type="submit" id="roleSearchButton" value="搜索管理员" /> 39 </form> 40 </div> 41 </td> 42 </tr> 43 </table> 44 </td> 45 <td width="9" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_16.gif"> </td> 46 </tr> 47 </table> 48 </td> 49 </tr> 50 <tr> 51 <td> 52 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 53 <tr> 54 <td width="9" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_12.gif"> </td> 55 <td bgcolor="#f3ffe3"><table width="99%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98" onmouseover="changeto()" onmouseout="changeback()"> 56 <tr> 57 <td width="8%" height="18" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">序号</div></td> 58 <td width="8%" height="18" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">名称</div></td> 59 <td width="8%" height="18" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">注册时间</div></td> 60 <td width="8%" height="18" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">状态</div></td> 61 <td width="8%" height="18" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">操作</div></td> 62 </tr> 63 <c:choose> 64 <c:when test="${empty qr.results }"> 65 <tr> 66 <td height="18" bgcolor="#FFFFFF" class="STYLE2"><div align="center" class="STYLE2 STYLE1">当前没有纪录</div></td> 67 </tr> 68 </c:when> 69 <c:otherwise> 70 <c:forEach items="${qr.results }" var="role"> 71 <tr> 72 <td height="18" bgcolor="#FFFFFF" class="STYLE2"><div align="center" class="STYLE2 STYLE1">${role.id }</div></td> 73 <td height="18" bgcolor="#FFFFFF" class="STYLE2"><div align="center" class="STYLE2 STYLE1">${role.name }</div></td> 74 <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">${role.registTime }</div></td> 75 <td height="18" bgcolor="#FFFFFF"><div align="center"><span class="STYLE2"><img id="roleDelFlag_${role.id }" name="${role.delFlag}" src="${pageContext.request.contextPath}/img/admin/backstage-img/${role.delFlag ? '010.gif' : '005.gif' }" width="9" height="9" /></span></div></td> 76 <td height="18" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">[</span><a href="${pageContext.request.contextPath}/admin_role/admin-roleUpdateUI?role.id=${role.id}">资料</a><span class="STYLE1">]|</span><span class="STYLE1">[</span><a id="roleDelFlagChange_${role.id }" href="javascript:void(0);" onclick="roleDelFlagChange(${role.id},'role');">${role.delFlag ? "启用" : "<font color='red'>禁用</font>" }</a><span class="STYLE1">]</span></div></td> 77 </tr> 78 </c:forEach> 79 </c:otherwise> 80 </c:choose> 81 </table></td> 82 <td width="9" background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_16.gif"> </td> 83 </tr> 84 </table> 85 </td> 86 </tr> 87 <tr> 88 <td height="29"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 89 <tr> 90 <td width="15" height="29"><img src="${pageContext.request.contextPath}/img/admin/backstage-img/tab_20.gif" width="15" height="29" /></td> 91 <td background="${pageContext.request.contextPath}/img/admin/backstage-img/tab_21.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 92 <tr> 93 <td width="25%" height="29" nowrap="nowrap"><span class="STYLE1">共<c:out value="${qr.count }" default="0"></c:out>条纪录 </span></td> 94 <td width="75%" valign="top" class="STYLE1"></td> 95 </tr> 96 </table></td> 97 <td width="14"><img src="${pageContext.request.contextPath}/img/admin/backstage-img/tab_22.gif" width="14" height="29" /></td> 98 </tr> 99 </table></td> 100 </tr> 101 </table> 102 <input type="hidden" id="basePath" value="${pageContext.request.contextPath}"/> 103 104 <script type="text/javascript" src="${pageContext.request.contextPath}/js/share/jquery-1.7.0.min.js" charset="UTF-8"></script> 105 <script type="text/javascript" src="${pageContext.request.contextPath}/js/admin/admin-public.js" charset="UTF-8"></script> 106 <script type="text/javascript"> 107 function roleDelFlagChange(id,name){ 108 var nameValue=$("#"+name+"DelFlag_"+id).attr("name"); 109 if(id != "" || null != id){ 110 var basePath=$("#basePath").val(); 111 $.post("admin_"+name+"/admin-"+name+"DelFlagChange",{ 112 "role.id" : id 113 },function(data){ 114 if(data=="success"){ 115 if(nameValue == "true"){ 116 $("#"+name+"DelFlag_"+id).attr("src",basePath+"/img/admin/backstage-img/005.gif"); 117 $("#"+name+"DelFlagChange_"+id).html("<font color='red'>禁用</font>"); 118 $("#"+name+"DelFlag_"+id).attr("name","false"); 119 }else if(nameVlue == "false"){ 120 $("#"+name+"DelFlag_"+id).attr("src",basePath+"/img/admin/backstage-img/010.gif"); 121 $("#"+name+"DelFlagChange_"+id).html("启用"); 122 $("#"+name+"DelFlag_"+id).attr("name","true"); 123 } 124 } 125 }); 126 } 127 }; 128 </script> 129 </body> 130 </html>
在代码的第75,76行：
1 <td height="18" bgcolor="#FFFFFF"><div align="center"><span class="STYLE2"><img id="roleDelFlag_${role.id }" name="${role.delFlag}" src="${pageContext.request.contextPath}/img/admin/backstage-img/${role.delFlag ? '010.gif' : '005.gif' }" width="9" height="9" /></span></div></td> 2 <td height="18" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">[</span><a href="${pageContext.request.contextPath}/admin_role/admin-roleUpdateUI?role.id=${role.id}">资料</a><span class="STYLE1">]|</span><span class="STYLE1">[</span><a id="roleDelFlagChange_${role.id }" href="javascript:void(0);" onclick="roleDelFlagChange(${role.id},'role');">${role.delFlag ? "启用" : "<font color='red'>禁用</font>" }</a><span class="STYLE1">]</span></div></td> 3
图片img的id,name为下面所示：
1 id=roleDelFlag_${role.id } name=${role.delFlag }
说明：delFlag是role对象的一个属性，类型为boolean。
在调用的js中：
1 <script type="text/javascript"> 2 function roleDelFlagChange(id,name){ 3 var nameValue=$("#"+name+"DelFlag_"+id).attr("name"); 4 if(id != "" || null != id){ 5 var basePath=$("#basePath").val(); 6 $.post("admin_"+name+"/admin-"+name+"DelFlagChange",{ 7 "role.id" : id 8 },function(data){ 9 if(data=="success"){ 10 if(nameValue == "true"){ 11 $("#"+name+"DelFlag_"+id).attr("src",basePath+"/img/admin/backstage-img/005.gif"); 12 $("#"+name+"DelFlagChange_"+id).html("<font color='red'>禁用</font>"); 13 $("#"+name+"DelFlag_"+id).attr("name","false"); 14 }else if(nameVlue == "false"){ 15 $("#"+name+"DelFlag_"+id).attr("src",basePath+"/img/admin/backstage-img/010.gif"); 16 $("#"+name+"DelFlagChange_"+id).html("启用"); 17 $("#"+name+"DelFlag_"+id).attr("name","true"); 18 } 19 } 20 }); 21 } 22 }; 23 </script>
代码的第3行：
1 var nameValue=$("#"+name+"DelFlag_"+id).attr("name");
中nameValue是一个字符串！并非boolean值，所以大家看到：
1 if(nameValue == "true"){ 2 $("#"+name+"DelFlag_"+id).attr("src",basePath+"/img/admin/backstage-img/005.gif"); 3 $("#"+name+"DelFlagChange_"+id).html("<font color='red'>禁用</font>"); 4 $("#"+name+"DelFlag_"+id).attr("name","false"); 5 }else if(nameVlue == "false"){ 6 $("#"+name+"DelFlag_"+id).attr("src",basePath+"/img/admin/backstage-img/010.gif"); 7 $("#"+name+"DelFlagChange_"+id).html("启用"); 8 $("#"+name+"DelFlag_"+id).attr("name","true"); 9 }
第1行和第5行判断的是nameValue这个字符串是否为"true","false",
如果我们使用：
1 if(nameValue){ 2 $("#"+name+"DelFlag_"+id).attr("src",basePath+"/img/admin/backstage-img/005.gif"); 3 $("#"+name+"DelFlagChange_"+id).html("<font color='red'>禁用</font>"); 4 $("#"+name+"DelFlag_"+id).attr("name","false"); 5 }else { 6 $("#"+name+"DelFlag_"+id).attr("src",basePath+"/img/admin/backstage-img/010.gif"); 7 $("#"+name+"DelFlagChange_"+id).html("启用"); 8 $("#"+name+"DelFlag_"+id).attr("name","true"); 9 }
这样第1行，判断的是nameValue是一个对象。
扫一扫
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
