Javascript 如何在一个JSP中设计多个按钮？每次单击，将显示不同的输入选项
我的需求描述：：我正在用JAVA设计一个webapp，它与DB（MySQL）交互，注册员工，更新员工信息，查询员工id，并删除记录。在后端，我使用Hibernate框架 因此，我的网页中应该有4个按钮：Javascript 如何在一个JSP中设计多个按钮？每次单击，将显示不同的输入选项,javascript,html,css,jsp,Javascript,Html,Css,Jsp,我的需求描述：：我正在用JAVA设计一个webapp，它与DB（MySQL）交互，注册员工，更新员工信息，查询员工id，并删除记录。在后端，我使用Hibernate框架 因此，我的网页中应该有4个按钮： 添加员工 更新员工 解雇员工 查询员工 单击“添加员工”时，应向用户请求一些信息，如员工id、姓名等，其他3个按钮应处于隐藏模式。 单击其他按钮的情况也相同 我的问题：我已经设计了我的网页，但是当我点击任何一个按钮时，都没有显示任何内容。我不确定问题出在哪里。 我对JSP和CSS的知识有限。
- 添加员工
- 更新员工
- 解雇员工
- 查询员工
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Employee Registration</title>
<style type="text/css">
.ui-jqgrid .ui-jqgrid-bdiv {
overflow-y: scroll;
background: #FBFBFB;
max-height: 220px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jqGrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/button.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/design.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery.gritter.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jsn.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/main.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s1.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s2.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/style.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/somu.css">
<script type="text/javascript" src="/Employee/WebContent/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
function display_ct() {
var strcount
var x = new Date()
var x1 = x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();
document.getElementById("time_div").innerHTML = x1;
tt = display_c();
}
function display_c() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setTimeout('display_ct()', refresh)
}
function showDiv(element){
var type = element.value;
var effect = 'slide';
var options = {direction: "left"};
var duration = 500;
if (type == 'Employee Registration') {
alert("hi");
$('#id_register').show();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').hide();
alert("done");
}
else if (type == 'Employee Update'){
$('#id_register').hide();
$('#id_update').show();
$('#id_removal').hide();
$('#id_query').hide();
}
else if (type == 'Employee Removal'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').show();
$('#id_query').hide();
}
else if (type == 'Employee Query'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').show();
}
}
</script>
</head>
<body onload=display_ct();>
<div class="Bitmap">
<img src="Images/online-employee-registration.jpg" style="height: 800px; width: 1355px; position: absolute; z-index: -1;" />
</div>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="center" width="800">
<b><font size="12"><label>Welcome to Employee Portal</label></font></b>
</td>
</tr>
</table>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="right" width="200"><span id="time_div" class="clock2"></span></td>
</tr>
</table>
<center>
<form action="EmployeeRegistration" name="UserDetailsContract" method="post"
enctype="multipart/form-data" id="id_userDetailsContract">
<table>
<tr align="center">
<td>
<input value="Employee Registration"
type="button"
onclick="showDiv(this);" />
<input value="Employee Update"
type="button"
onclick="showDiv(this);" />
<input value="Employee Removal"
type="button"
onclick="showDiv(this);" />
<input value="Employee Query"
type="button"
onclick="showDiv(this);" />
</td>
</tr>
</table>
<div id="id_register" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Name:<td><input type="text" name="name"/></tr>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
<tr><td width="20%">Email ID:<td><input type="text" name="emailID"/></tr>
<tr><td width="20%">Phone:<td><input type="text" name="phone" size="30" /></tr>
<tr><td width="20%">City:<td><input type="text" name="city" size="30" /></tr>
</tbody>
</table>
<input type="submit" value="Register" />
</div>
<div id="id_query" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Search" />
</div>
<div id="id_update" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Update" />
</div>
<div id="id_removal" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Remove" />
</div>
<!-- <p /> -->
</form>
</center>
</body>
</html>
雇员登记
.ui jqgrid.ui jqgrid bdiv{
溢出y：滚动；
背景:#fbfb；
最大高度：220px；
}
功能显示{
var strcount
var x=新日期（）
var x1=x.getHours（）+“：”+x.getMinutes（）+“：”+x.getSeconds（）；
document.getElementById（“time_div”）.innerHTML=x1；
tt=显示_c（）；
}
功能显示_c（）{
var refresh=1000；//刷新率（毫秒）
mytime=setTimeout（'display_ct（）'，刷新）
}
函数showDiv（元素）{
变量类型=元素值；
var效应='滑动'；
var options={direction:“left”}；
var持续时间=500；
如果（类型==“员工注册”）{
警报（“hi”）；
$（'#id_register'）。show（）；
$（'#id_update'）.hide（）；
$（'#id_removation'）.hide（）；
$（'#id_query'）.hide（）；
警惕（“完成”）；
}
else if（类型==“员工更新”）{
$（'id_register'）.hide（）；
$（'#id_update'）.show（）；
$（'#id_removation'）.hide（）；
$（'#id_query'）.hide（）；
}
else if（类型=‘员工离职’）{
$（'id_register'）.hide（）；
$（'#id_update'）.hide（）；
$（'id#u removation'）.show（）；
$（'#id_query'）.hide（）；
}
else if（类型==“员工查询”）{
$（'id_register'）.hide（）；
$（'#id_update'）.hide（）；
$（'#id_removation'）.hide（）；
$（'#id_query'）.show（）；
}
}
欢迎来到员工门户
姓名：
员工ID:
电子邮件ID:
电话：
城市：
员工ID:
员工ID:
员工ID: