bootstrap modal 传值
包兴思
十分感谢分享的博主 原地址为: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
类似资料：