工程如下：
其中jquery插件用的是jquery-1.10.1.js的版本
其中bootstrap插件用的是bootstrap-3.3.7的版本
index.jsp代碼
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<!-- 引入bootstrap的css樣式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 引入jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.10.1.js"></script>
<!-- 引入bootstrap的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
//對新增按鈕綁定事件
$("#addEmpBtn").click(function(){
//打開新增用的模態框
$("#addModal").modal("show");
});
//對刪除按鈕綁定事件
$(".deleteUserBtn").click(function(){
//刪除的模態框
$("#delModal").modal("show");
});
//對修改按鈕綁定事件
$(".updateUserBtn").click(function(){
var user=$(this).parent().parent();
var id=$(user).find("td:eq(1)").text().trim();
var name=$(user).find("td:eq(2)").text().trim();
var pwd=$(user).find("td:eq(3)").text().trim();
var gender=$(user).find("td:eq(4)").text().trim();
var age=$(user).find("td:eq(5)").text().trim();
var department=$(user).find("td:eq(6)").text().trim();
$("#updateModal input[name=id]").val(id);
$("#updateModal input[name=name]").val(name);
$("#updateModal input[type=password]").val(pwd);
$("#updateModal input[name=age]").val(age);
$("#updateModal select").val(department);
if( gender=='男'){
$('#updateModal input:radio:first').prop('checked', 'checked');
}else{
$('#updateModal input:radio:last').prop('checked', 'checked');
}
$("#updateModal").modal("show");
});
//全選
$("#a").click(function(){
var s=this.checked;
$(":checkbox[name='items']").prop("checked",s);
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-4">
<h1>遍歷界面</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<button class="btn btn-danger btn-lg deleteUserBtn">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>批量刪除</button>
</div>
<div class="col-md-2 col-md-offset-5">
<button id="addEmpBtn" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加</button>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table class="table table-hover">
<tr class="success">
<td><input type="checkbox" id='a' /></td>
<td>#</td>
<td>name</td>
<td>pwd</td>
<td>gender</td>
<td>age</td>
<td>department</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="items" /></td>
<td>1</td>
<td>張三</td>
<td>111</td>
<td>男</td>
<td>11</td>
<td>銷售部</td>
<td><button class="btn btn-danger deleteUserBtn"><span class="glyphicon glyphicon-trash" ></span> 刪除</button>|<button class="btn btn-primary updateUserBtn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td>
</tr>
<tr>
<td><input type="checkbox" name="items" /></td>
<td>1</td>
<td>李四</td>
<td>222</td>
<td>女</td>
<td>12</td>
<td>生產部</td>
<td><button class="btn btn-danger deleteUserBtn"><span class="glyphicon glyphicon-trash" ></span> 刪除</button> | <button class="btn btn-primaryupdateUserBtn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td>
</tr>
<tr>
<td><input type="checkbox" name="items" /></td>
<td>2</td>
<td>王五</td>
<td>333</td>
<td>男</td>
<td>12</td>
<td>生產部</td>
<td><button class="btn btn-danger deleteUserBtn"><span class="glyphicon glyphicon-trash" ></span> 刪除</button> | <button class="btn btn-primaryupdateUserBtn"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td>
</tr>
<tr>
<td><input type="checkbox" name="items" /></td>
<td>3</td>
<td>Frank</td>
<td>444</td>
<td>男</td>
<td>12</td>
<td>生產部</td>
<td><button class="btn btn-danger deleteUserBtn"><span class="glyphicon glyphicon-trash" ></span> 刪除</button> | <button class="btn btn-primaryupdateUserBtn"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td>
</tr>
</table>
</div>
</div>
</div>
<!-- 第一是 .modal，用來把 <div> 的內容識別爲模態框。
第二是 .fade class。當模態框被切換時，它會引起內容淡入淡出。
aria-labelledby="myModalLabel"，該屬性引用模態框的標題。
屬性 aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發爲止（比如點擊在相關的按鈕上）。
<div class="modal-header">，modal-header 是爲模態窗口的頭部定義樣式的類。
class="close"，close 是一個 CSS class，用於爲模態窗口的關閉按鈕設置樣式。
data-dismiss="modal"，是一個自定義的 HTML5 data 屬性。在這裏它被用於關閉模態窗口。
class="modal-body"，是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的主體設置樣式。
class="modal-footer"，是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的底部設置樣式。
data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口 -->
<!-- 修改模態框（Modal） -->
<div class="modal fade" id="updateModal"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">修改User
<span class="glyphicon glyphicon-user"></span>
</h4>
</div>
<!--寫入編碼 -->
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputId" class="col-sm-2 control-label">編號</label>
<div class="col-sm-6">
<input type="number" disabled="disabled" class="form-control" id="inputId"
name="id" placeholder="請輸入員工編號">
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputName"
name="name" placeholder="請輸入員工姓名">
</div>
</div>
<div class="form-group">
<label for="inputPwd" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPwd"
name="password" placeholder="請輸入員工密碼">
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性別</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="gender" value="男" > 男 </label>
<label class="radio-inline"> <input type="radio" name="gender"
value="女"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">年齡</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="inputAge"
name="age" placeholder="請輸入員工年齡">
</div>
</div>
<div class="form-group">
<label for="inputDep" class="col-sm-2 control-label">所屬部門</label>
<div class="col-sm-3">
<select class="form-control" id="select" name="dId">
<option value="銷售部">銷售部</option>
<option value="生產部">生產部</option>
<option value="人事部">人事部</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">修改</button>
</div>
</div>
</div>
</div>
<!-- 刪除模態框（Modal） -->
<div class="modal fade" id="delModal" 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">刪除User
<span class="glyphicon glyphicon-user"></span>
</h4>
</div>
<div class="modal-body">
<h3>是否刪除?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger">刪除</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- 添加模態框（Modal） -->
<div class="modal fade" id="addModal" 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">添加User
<span class="glyphicon glyphicon-user"></span>
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputName"
name="name" placeholder="請輸入員工姓名">
</div>
</div>
<div class="form-group">
<label for="inputPwd" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPwd"
name="password" placeholder="請輸入員工密碼">
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性別</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="gender" value="男" checked> 男 </label>
<label class="radio-inline"> <input type="radio" name="gender"
value="女"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">年齡</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="inputAge"
name="age" placeholder="請輸入員工年齡">
</div>
</div>
<div class="form-group">
<label for="inputDep" class="col-sm-2 control-label">所屬部門</label>
<div class="col-sm-3">
<select class="form-control" name="did">
<option value="銷售部">銷售部</option>
<option value="生產部">生產部</option>
<option value="人事部">人事部</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>保存</button>
</div>
</div>
</div>
</div>
</body>
</html>