纸上得来终觉浅,看了JSP的范例宝典,还是决定把书本的例子操作一遍才安心。
今天在老是把none写成nono,结果老是隐藏不了。
style="display: none";
本实例主要利用javascript设置表格的display样式来实现表格的显示和隐藏。将表格的display样式设置为none,可以控制表格的隐藏,将表格的display样式设置为block,
可以显示表格。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 12 <title>选中单选按钮后显示其他表单元素</title> 13 14 <meta http-equiv="pragma" content="no-cache"> 15 <meta http-equiv="cache-control" content="no-cache"> 16 <meta http-equiv="expires" content="0"> 17 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 18 <meta http-equiv="description" content="This is my page"> 19 <!-- 20 <link rel="stylesheet" type="text/css" href="styles.css"> 21 --> 22 23 </head> 24 25 <body> 26 <input name="user" type="radio" onClick="im1.style.display='block';im2.style.display ='none';" value="0" checked>普通用户 27 <input type="radio" name="user" value="1" onClick="im2.style.display ='block';im1.style.display ='none';">超级用户 28 <table width="448" border="0" id="im1" style="display:nono"> 29 <tr> 30 <td> 31 <input name="shenhe" type="checkbox" id="shenhe2" value="1"> 32 批示功能</td> 33 <td> 34 <input name="huiyi" type="checkbox" id="huiyi2" value="1"> 35 会议管理</td> 36 <td> 37 <input name="gonggong" type="checkbox" id="gonggong2" value="1"> 38 公共信息管理 </td> 39 <td> 40 <input name="geren" type="checkbox" id="geren2" value="1"> 41 审核个人登记活动 </td> 42 </tr> 43 </table> 44 <table style="display: none" id="im2"> 45 <tr> 46 <td> <input name="geren" type="checkbox" id="geren2" value="1">超级管理员权限</td> 47 </tr> 48 </table> 49 <table> 50 <tr bgcolor="#F3F3F3"> 51 <td height="23" colspan="6"><div align="center"> 52 <input type="submit" name="Submit" value="提交"> 53 <input type="reset" name="Submit2" value="重置"> 54 </div></td> 55 </tr> 56 </table> 57 <div style= "display:none "> ok </div> 58 59 </body> 60 </html>