- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <HTML>
- <head>
- <base href="<%=basePath%>">
- <title>
- My JSP 'showTeachers.jsp' starting page
- </title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <!-- <link rel="stylesheet" type="text/CSS" href="styles.css">
- -->
- <link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"
- type="text/css" href="styles.css">
- <script src="js/jquery-2.1.1.min.js" type="text/javascript">
- </script>
- <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript">
- </script>
- <style>
- #edit_teacher{ padding-right:15px; } #edit_teacher,#delete_teacher{ cursor:pointer;
- display:none; }
- </style>
- </head>
- <body>
- <div class="container">
- <div id="nav_top">
- </div>
- <div id="table_teacher">
- </div>
- </div>
- <br>
- </body>
- <script language="JavaScript">
- var $table = $('<table class="table table-hover"></table>');
- $(document).ready(function() {
- $("#nav_top").load("nav/nav_top.jsp");
- var s = '${json}';
- var s = eval("(" + s + ")");
- createTable("table_teacher", s);
- });
- function createTable(div, s) {
- // var $table=$('<table class="table table-hover "id="table_teacher_main"style="table-layout:fixed"></table>');
- $("div").append($table);
- var $caption = $('<caption style="text-align:center;">jquery 生成 bootstrap 表格 </caption>');
- $table.append($caption);
- var $thead = $('<thead></thead>');
- var $trs = $('<tr></tr>');
- var $th1 = $('<th > 姓名 </th>');
- var $th2 = $('<th > 年龄 </th>');
- var $th3 = $('<th > 电话 </th>');
- var $th4 = $('<th > 操作 </th>');
- $trs.append($th1);
- $trs.append($th2);
- $trs.append($th3);
- $trs.append($th4);
- $thead.append($trs);
- $table.append($thead);
- for (var p = 0; p < s.length; p++) {
- create_tbody(s[p].id, s[p].name, s[p].tel_phone);
- }
- }
- function create_tbody(td1, td2, td3) {
- var $tr = $('<tr class="tr_content"></tr>');
- $table.append($tr);
- var $td1 = $('<td class="td_content1">' + td1 + '</td>');
- $tr.append($td1);
- var $td2 = $('<td class="td_content1">' + td2 + '</td>');
- $tr.append($td2);
- var $td3 = $('<td class="td_content1">' + td3 + '</td>');
- $tr.append($td3);
- var $td4 = $('<td width="10%"></td>');
- var $edit = $('<span class="text-info edit_teacher"id="edit_teacher"> 编辑 </span>');
- var $delete = $('<span class="text-info delete_teacher"id="delete_teacher"> 删除 </span>');
- $td4.append($edit);
- $td4.append($delete);
- $tr.append($td4); < span style = "color:#009900;" > $(document).on("mouseover", ".tr_content",
- function() {
- $(this).children().each(function() {
- $(this).find("span").show();
- });
- });
- $(document).on("mouseout", ".tr_content",
- function() {
- $(this).children().each(function() {
- $(this).find("span").hide();
- });
- }); < /span>
- }
- /
- </script>
- </HTML>
来源: http://www.jianshu.com/p/522a8baf6c5c