bootstrap modal 传值

最新推荐文章于 2024-03-08 10:07:37 发布

sunstubble

最新推荐文章于 2024-03-08 10:07:37 发布

阅读量2.4k

点赞数

分类专栏： bootstrap

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

十分感谢分享的博主原地址为:http://blog.csdn.net/baalhuo/article/details/51178154

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page language="java" import="javax.servlet.http.HttpSession"%>
<%@ page language="java" import="xyz.baal.entity.Student"%>
<%@ page language="java" import="xyz.baal.dao.GetStudentInfoDao"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>学生信息</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/iconfont.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/base64.js"></script>
<style type="text/css">
a{cursor: pointer;}
a:link {color: #37a;text-decoration: none;}
a:visited {color: #666699;text-decoration: none;}
a:hover {color: #FFFFFF;text-decoration: none;background: #37a;}
a:active {color: #FFFFFF;text-decoration: none;background: #FF9933;}
.footer {padding: 20px;border-top: 1px solid #ddd;}
.panel-heading {padding: ;height: 46px;}
.table th {text-align: center;}
.table tbody td {text-align: center;}
thead tr .index {width: 10px;}
thead tr .stuno {width: 20%;}
thead tr .pswd {width: 20%;}
thead tr .name {width: 15%;}
thead tr .sex {width: 10%;}
thead tr .edit {width: 10%;}
thead tr .job {width: 10%;}
.page{text-align:center;}
.page .pagination{margin:0px;  text-align: center;}
</style>
</head>
<body>
	<%
		HttpSession ht = request.getSession();
		Student stu = (Student) ht.getAttribute("student");
		if (stu == null) {
			response.sendRedirect("index.jsp");
			return;
		} else {
			//	List<Student> list = (List<Student>) ht.getAttribute("list");
			//	request.setAttribute("list", list);
		}
	%>
	<div class="container">
		<br>
		<h1>学生信息表格</h1>
		<hr>
		<div class="panel panel-default">
			<div class="panel-heading"></div>
			<div class="panel-body">
				<table
					class="table table-hover table-striped table-bordered table-responsive"
					id="table">
					<thead>
						<tr>
							<th class="index">序号</th>
							<th class="stuno">学号</th>
							<th class="pswd">密码</th>
							<th class="name">姓名</th>
							<th class="sex">性别</th>
							<th class="edit">编辑</th>
							<th class="del">删除</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${requestScope.students}" var="info"
							varStatus="vs">
							<tr class="active">
								<td>${info.id}</td>
								<td>${info.studentNo}</td>
								<td>${info.password}</td>
								<td>${info.studentName}</td>
								<td>${info.studentSex}</td>
								<td class="edit"><input data-toggle="modal"
									data-target="#myModal" id="${vs.index+1}"
									class="btn bt-sm btn-success radius" type="button" value="编辑"
									οnclick="editInfo(this)" />
								</td>
								<td class="edit"><input id="${vs.index+1}"
									class="btn bt-sm btn-danger radius" type="button" value="删除"
									οnclick="delInfo(this)" />
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<div class="page" >				
					<ul class="pagination">
						<c:if test="${param.cur == 1}">
							<li><a >«</a></li>
						</c:if>
						<c:if test="${param.cur != 1}">
							<li><a href="login.do?cur=${param.cur - 1}">«</a></li>
						</c:if>
						<c:forEach var="i" begin="1" end="${requestScope.totalPage}" step="1">   
						  <li ><a  href="login.do?cur=${i}">${i}</a></li>
						</c:forEach>
						<c:if test="${param.cur == requestScope.totalPage}">
							<li><a >»</a></li>
						</c:if>
						<c:if test="${param.cur != requestScope.totalPage}">
							<li ><a href="login.do?cur=${param.cur + 1}">»</a></li>
						</c:if>
					
					</ul>
				</div>	
	</div>
</div>


		<a href="logout.do" style="float:right;">退出登陆</a>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="update" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">修改信息</h4>
					</div>
					<div class="modal-body">
						学号：<input type="text" name="stuno" id="stuno" readonly="true" />
						密码：<input type="text" name="pass" id="pass" /> <br />
						姓名：<input type="text" name="stuname" id="stuname" /> 
						性别：<input type="radio" name="sex" class="sex" id="man" value="男" /> 男   
							<input type="radio" name="sex" class="sex" id="women" value="女" /> 女
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" οnclick="update()">提交更改</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<!-- 模态框（Modal）end -->
	</div>

	<script type="text/javascript">
		function editInfo(obj) {
			var id = $(obj).attr("id");
			var stuno = document.getElementById("table").rows[id].cells[1].innerText;
			var pass = document.getElementById("table").rows[id].cells[2].innerText;
			var name = document.getElementById("table").rows[id].cells[3].innerText;
			var sex = document.getElementById("table").rows[id].cells[4].innerText;
			var b = new Base64();
			pass = b.decode(pass);
			$('#stuno').val(stuno);
			$('#pass').val(pass);
			$('#stuname').val(name);
			if (sex == '女') {
				document.getElementById('women').checked = true;
			} else {
				document.getElementById('man').checked = true;
			}
			$('#update').modal('show');
		}
		function update() {
			var stuno = $('#stuno').val();
			var pass = $('#pass').val();
			var name = $('#stuname').val();
			var sex = $('input:radio[name="sex"]:checked').val();
			$.ajax({
						type : "post",
						url : "update.do",
						data : "stuno=" + stuno + "&pass=" + pass + "&name="
								+ name + "&sex=" + sex,
						dataType : 'html',
						contentType : "application/x-www-form-urlencoded; charset=utf-8",
						success : function(result) {
							location.reload();
						}
					});
		}
		function delInfo(obj) {
			if (confirm("确认要删除？")) {
				var id = $(obj).attr("id");
				var stuNo = document.getElementById("table").rows[id].cells[1].innerText;
				$.ajax({
							type : "post",
							url : "del.do",
							data : "studentno=" + stuNo,
							dataType : 'html',
							contentType : "application/x-www-form-urlencoded; charset=utf-8",
							success : function(result) {
								$(".table tr:eq(" + id + ")").remove();
							}
						});
			}
		}
	</script>
</body>
</html>
Contact GitHub API Training Shop Blog About
© 2017 GitHub, Inc. Terms Privacy Security Status Help

sunstubble

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap modal 传值

学生信息a{cursor: pointer;}a:link {color: #37a;text-decoration: none;}a:visited {color: #666699;text-decoration: none;}a:hover {color: #FFFFFF;text-decoration: none;background: #37a;}a:active
复制链接

扫一扫