一、制作弹窗
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border-spacing: none;
}
</style>
<script type="text/javascript">
function method(){
var a = document.getElementsByName("sele");
var b = 0;
for(var i = 0;i < a.length; i++){
if(a[i].checked == true){
alert('退出成功');
return true;
}else{
if(a[i].checked==false){
b++; //如果方框没选中，该值会累加
}
if(b==a.length){ //如果该值和方框的个数相同，那么就会报错
alert('请选中要操作的项');
}
}
}
// var state = document.getElementsByName("sele").checked;
// if(state == true){
// alert('您已选择好了吗？');
// }else{
// alert('请选中要操作的项');
// }
}
</script>
</head>
<body>
<div style="background-color: gainsboro; width: 100%;" >
<table align="left" width="100%" style="background-color: gainsboro;">
<tr>
<td><span style="background-color: white;">挂号管理</span></td>
</tr>
</table>
</div>
<div>
<form action="login.jsp" method="post">
<table border="1" width="100%">
<tr>
<td>病历号：</td>
<td>
<input type="text" />
</td>
<td>主治医生:</td>
<td>
<input type="text" />
</td>
<td>科室:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>挂号时间：</td>
<td colspan="5">
<input type="text" />至<input type="text" />
<input type="image" src="../img/img/QQ截图20200909181703.png"/>
<input type="image" src="../img/img/QQ截图20200909181714.png"/>
</td>
</tr>
</table>
</form>
</div>
<div>
<table border="1" width="100%" >
<tr>
<th><input type="checkbox" /></th>
<th>门诊编号</th>
<th>主治医生</th>
<th>挂号时间</th>
<th>挂号科室</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="sele"/></td>
<td>1103</td>
<td>程俊</td>
<td>2015-09-09 12：12：12</td>
<td>血液科</td>
<td>已挂号</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td><input type="checkbox" name="sele" /></td>
<td>1104</td>
<td>王博</td>
<td>2015-12-09 12：12：12</td>
<td>骨科</td>
<td>已询医</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td><input type="checkbox" name="sele" /></td>
<td>1105</td>
<td>沈青川</td>
<td>2015-02-04 15：11：12</td>
<td>外科</td>
<td>已询医</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td><input type="checkbox" name="sele" /></td>
<td>1106</td>
<td>欧阳雨露</td>
<td>2014-09-05 12：12：12</td>
<td>急诊科</td>
<td>已出院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td><input type="checkbox" name="sele" /></td>
<td>1107</td>
<td>艾小天</td>
<td>2014-02-09 12：12：11</td>
<td>妇科</td>
<td>已退号</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 退号</span>
</td>
</tr>
<tr>
<td colspan="4">
<a href="registrationtable.html"><img src="../img/img/QQ截图20200909181733.png"/></a>
<input type="image" src="../img/img/QQ截图20200909181744.png" onclick="method()"/>
<input type="image" src="../img/img/QQ截图20200909181755.png" />
<input type="image" src="../img/img/QQ截图20200909181805.png" />
</td>
<td colspan="3" align="right">
<span style="color: deepskyblue;">第一页 上一页
<span style="color: red;">1</span> 2 3 4 5 下一页
最后一页 </span>
<span>共 <span style="color: red;">32</span>条记录
<span style="color: red;">1/33 </span>页</span>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果截图：
二、制作弹窗
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.head{
background-color: gainsboro;
}
</style>
<script type="text/javascript">
function first(){
var a = document.getElementsByClassName("desizing");
alert("退院成功!");
}
function second(){
var b = document.getElementsByClassName("goout");
alert("出院成功!");
}
</script>
</head>
<body>
<div style="background-color: gainsboro; width: 100%;" >
<table align="left" width="100%" style="background-color: gainsboro;">
<tr>
<td><span style="background-color: white;">住院办理</span></td>
</tr>
</table>
</div>
<div>
<form action="login.jsp" method="post">
<table border="1" width="100%">
<tr>
<td>病历号：</td>
<td>
<input type="text" />
</td>
<td>主治医生:</td>
<td>
<input type="text" />
</td>
<td>科室:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>住院时间：</td>
<td colspan="5">
<input type="text" />至<input type="text" />
<input type="image" src="../img/img/QQ截图20200909181703.png"/>
<input type="image" src="../img/img/QQ截图20200909181714.png"/>
</td>
</tr>
</table>
</form>
</div>
<div>
<table border="1" width="100%">
<tr class="head">
<th><input type="checkbox" /></th>
<th>病历号</th>
<th>姓名</th>
<th>床位号</th>
<th>联系电话</th>
<th>押金</th>
<th>主治医生</th>
<th>入院时间</th>
<th>科室</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr class="head">
<td colspan="5">
<a href="zhuyuandengji.html"><img src="../img/img/QQ截图20200913172428.png" /></a>
<input type="image" src="../img/img/QQ截图20200913172439.png" />
<input type="image" src="../img/img/QQ截图20200913172448.png" />
<input type="image" src="../img/img/QQ截图20200909181755.png" />
<input type="image" src="../img/img/QQ截图20200913172455.png"/>
</td>
<td colspan="6" align="right">
<span style="color: deepskyblue;">第一页 上一页
<span style="color: red;">1</span> 2 3 4 5 下一页
最后一页 </span>
<span>共 <span style="color: red;">32</span>条记录
<span style="color: red;">1/33 </span>页</span>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果截图：
三、制作弹窗
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.head{
background-color: gainsboro;
}
</style>
<script type="text/javascript">
function first(){
var a = document.getElementsByClassName("desizing");
alert("退院成功!");
}
function second(){
var b = document.getElementsByClassName("goout");
alert("出院成功!");
}
</script>
</head>
<body>
<div style="background-color: gainsboro; width: 100%;" >
<table align="left" width="100%" style="background-color: gainsboro;">
<tr>
<td><span style="background-color: white;">住院办理</span></td>
</tr>
</table>
</div>
<div>
<form action="login.jsp" method="post">
<table border="1" width="100%">
<tr>
<td>病历号：</td>
<td>
<input type="text" />
</td>
<td>主治医生:</td>
<td>
<input type="text" />
</td>
<td>科室:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>住院时间：</td>
<td colspan="5">
<input type="text" />至<input type="text" />
<input type="image" src="../img/img/QQ截图20200909181703.png"/>
<input type="image" src="../img/img/QQ截图20200909181714.png"/>
</td>
</tr>
</table>
</form>
</div>
<div>
<table border="1" width="100%">
<tr class="head">
<th><input type="checkbox" /></th>
<th>病历号</th>
<th>姓名</th>
<th>床位号</th>
<th>联系电话</th>
<th>押金</th>
<th>主治医生</th>
<th>入院时间</th>
<th>科室</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1103</td>
<td>黄飞鸿</td>
<td>4343</td>
<td>13127653423</td>
<td>2000元</td>
<td>程俊</td>
<td>2015-01-05 12：33：56</td>
<td>血液科</td>
<td>已住院</td>
<td>
<span style="color: deepskyblue;">详情>>>更改 </span>
<span style="color: deepskyblue;" class="desizing" onclick="first()">退院 </span>
<span style="color: deepskyblue;" class="goout" onclick="second()">出院</span>
</td>
</tr>
<tr class="head">
<td colspan="5">
<a href="zhuyuandengji.html"><img src="../img/img/QQ截图20200913172428.png" /></a>
<input type="image" src="../img/img/QQ截图20200913172439.png" />
<input type="image" src="../img/img/QQ截图20200913172448.png" />
<input type="image" src="../img/img/QQ截图20200909181755.png" />
<input type="image" src="../img/img/QQ截图20200913172455.png"/>
</td>
<td colspan="6" align="right">
<span style="color: deepskyblue;">第一页 上一页
<span style="color: red;">1</span> 2 3 4 5 下一页
最后一页 </span>
<span>共 <span style="color: red;">32</span>条记录
<span style="color: red;">1/33 </span>页</span>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果截图：
四、制作弹窗
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bg{
background-color: gainsboro;
}
</style>
<script type="text/javascript">
function meth(){
var a = document.getElementsByName("sel");
var b = 0;
for(var i = 0;i < a.length; i++){
if(a[i].checked == true){
alert('删除成功');
return true;
}else{
if(a[i].checked==false){
b++; //如果方框没选中，该值会累加
}
if(b==a.length){ //如果该值和方框的个数相同，那么就会报错
alert('请选中要删除的项');
}
}
}
}
function delet(){
var shuju = document.getElementsByClassName("del");
alert("删除成功!");
}
</script>
</head>
<body>
<div style="background-color: gainsboro;width: 100%;">
<table>
<tr>
<td>挂号管理</td>
<td><span style="background-color: white;">用户管理</span></td>
<td>角色管理</td>
</tr>
</table>
</div>
<div>
<form>
<table border="1" width="100%">
<tr style="width: 100%;">
<td>
用户名称：<input type="text" /><img src="../img/img/QQ截图20200909181703.png" />
</td>
</tr>
</table>
</form>
</div>
<div>
<form>
<table border="1" width="100%">
<tr style="text-align: left;" class="bg">
<th><input type="checkbox" /></th>
<th>用户账户</th>
<th>真实姓名</th>
<th>角色</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="sel"/></td>
<td>admin</td>
<td>管理员</td>
<td>管理员</td>
<td>
<span style="color: deepskyblue;">编辑 </span>
<span style="color: deepskyblue;" class="del" onclick="delet()">删除</span>
</td>
</tr>
<tr class="bg">
<td colspan="2">
<a href="usermanagement.html"><img src="../img/img/QQ浏览器截图20200915101745.png"</a>
<input type="image" src="../img/img/QQ浏览器截图20200915101716.png" onclick="meth()"/>
</td>
<td colspan="3" style="text-align: right;">
10122条记录1/507ye <span style="color: deepskyblue;">下一页
<span style="color: red;">1</span> 2 3 4 5 下5页
最后一页 </span>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
效果截图：
五、制作弹窗
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bg{
background-color: gainsboro;
}
</style>
<script type="text/javascript">
function meth(){
var a = document.getElementsByName("sel");
var b = 0;
for(var i = 0;i < a.length; i++){
if(a[i].checked == true){
alert('删除成功');
return true;
}else{
if(a[i].checked==false){
b++; //如果方框没选中，该值会累加
}
if(b==a.length){ //如果该值和方框的个数相同，那么就会报错
alert('请选中要删除的项');
}
}
}
}
function delet(){
var shuju = document.getElementsByClassName("del");
alert("删除成功!");
}
</script>
</head>
<body>
<div style="background-color: gainsboro;width: 100%;">
<table>
<tr>
<td>挂号管理</td>
<td><span style="background-color: white;">用户管理</span></td>
<td>角色管理</td>
</tr>
</table>
</div>
<div>
<form>
<table border="1" width="100%">
<tr style="width: 100%;">
<td>
用户名称：<input type="text" /><img src="../img/img/QQ截图20200909181703.png" />
</td>
</tr>
</table>
</form>
</div>
<div>
<form>
<table border="1" width="100%">
<tr style="text-align: left;" class="bg">
<th><input type="checkbox" /></th>
<th>用户账户</th>
<th>真实姓名</th>
<th>角色</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="sel"/></td>
<td>admin</td>
<td>管理员</td>
<td>管理员</td>
<td>
<span style="color: deepskyblue;">编辑 </span>
<span style="color: deepskyblue;" class="del" onclick="delet()">删除</span>
</td>
</tr>
<tr class="bg">
<td colspan="2">
<a href="usermanagement.html"><img src="../img/img/QQ浏览器截图20200915101745.png"</a>
<input type="image" src="../img/img/QQ浏览器截图20200915101716.png" onclick="meth()"/>
</td>
<td colspan="3" style="text-align: right;">
10122条记录1/507ye <span style="color: deepskyblue;">下一页
<span style="color: red;">1</span> 2 3 4 5 下5页
最后一页 </span>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
效果截图：
六、制作弹窗
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bg{
background-color: gainsboro;
}
</style>
<script type="text/javascript">
function delet(){
var shuju = document.getElementsByClassName("del");
alert("删除成功!");
}
</script>
</head>
<body>
<div style="background-color: gainsboro;width: 100%;">
<table>
<tr>
<td>挂号管理</td>
<td><span style="background-color: white;">角色管理</span></td>
<td>用户管理</td>
</tr>
</table>
</div>
<div>
<form>
<table border="1" width="100%">
<tr style="width: 100%;">
<td>
角色名称：<input type="text" /><img src="../img/img/QQ截图20200909181703.png" />
</td>
</tr>
</table>
</form>
</div>
<div>
<form action="login.jsp" method="post" >
<table border="1" width="100%">
<tr style="text-align: left;" class="bg">
<th><input type="checkbox" /></th>
<th>角色名称</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>管理员</td>
<td>启用</td>
<td>
<span style="color: deepskyblue;">编辑 </span>
<span style="color: deepskyblue;" class="del" onclick="delet()">删除</span>
</td>
</tr>
<tr class="bg">
<td colspan="2">
<a href="rolemanagenent.html"><img src="../img/img/QQ浏览器截图20200915101706.png"</a>
<input type="image" src="../img/img/QQ浏览器截图20200915101716.png"/>
</td>
<td colspan="2" style="text-align: right;">
10122条记录1/507ye <span style="color: deepskyblue;">下一页
<span style="color: red;">1</span> 2 3 4 5 下5页
最后一页 </span>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
效果截图：
七、制作弹窗
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bg{
background-color: gainsboro;
}
</style>
<script type="text/javascript">
function delet(){
var shuju = document.getElementsByClassName("del");
alert("删除成功!");
}
function meth(){
var a = document.getElementsByName("sel");
var b = 0;
for(var i = 0;i < a.length; i++){
if(a[i].checked == true){
alert('删除成功');
return true;
}else{
if(a[i].checked==false){
b++; //如果方框没选中，该值会累加
}
if(b==a.length){ //如果该值和方框的个数相同，那么就会报错
alert('请选中要删除的项');
}
}
}
}
</script>
</head>
<body>
<div style="background-color: gainsboro;width: 100%;">
<table>
<tr>
<td>挂号管理</td>
<td><span style="background-color: white;">资源管理</span></td>
<td>用户管理</td>
</tr>
</table>
</div>
<div>
<form>
<table border="1" width="100%">
<tr style="width: 100%;">
<td>
资源（菜单）名称：<input type="text" /><img src="../img/img/QQ截图20200909181703.png" />
</td>
</tr>
</table>
</form>
</div>
<div>
<form>
<table border="1" width="100%">
<tr style="text-align: left;" class="bg">
<th><input type="checkbox" /></th>
<th>资源名称</th>
<th>路径Url</th>
<th>是否有效</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="sel"/></td>
<td>挂号信息管理</td>
<td>query.action</td>
<td>有效</td>
<td>
<span style="color: deepskyblue;">编辑 </span>
<span style="color: deepskyblue;" class="del" onclick="delet()">删除</span>
</td>
</tr>
<tr class="bg">
<td colspan="2">
<input type="image" src="../img/QQ截图20200917132054.png"/>
<input type="image" src="../img/img/QQ浏览器截图20200915101716.png" onclick="meth()"/>
</td>
<td colspan="3" style="text-align: right;">
10122条记录1/507ye <span style="color: deepskyblue;">下一页
<span style="color: red;">1</span> 2 3 4 5 下5页
最后一页 </span>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
效果截图：
以上为本次JavaScript作业，如有错误请大家指正。
扫一扫
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
