1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  

  2. <%  

  3. String path = request.getContextPath();  

  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  

  5. %>  

  6. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  

  7.   

  8. >  

  9. <html>  

  10.   <head>  

  11.     <base href="<%=basePath%>">  

  12.       

  13.     <title>My JSP 'showTeachers.jsp' starting pagetitle>  

  14.       

  15.     <meta http-equiv="pragma" content="no-cache">  

  16.     <meta http-equiv="cache-control" content="no-cache">  

  17.     <meta http-equiv="expires" content="0">      

  18.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  

  19.     <meta http-equiv="description" content="This is my page">  

  20.       

  21.         <link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" href="styles.css">  

  22.     <script src="js/jquery-2.1.1.min.js" type="text/javascript">  

  23.         script>  

  24.     <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript">script>   

  25.     <style>  

  26.         #edit_teacher{  

  27.             padding-right:15px;  

  28.         }  

  29.         #edit_teacher,#delete_teacher{  

  30.             cursor:pointer;  

  31.             display:none;  

  32.         }  

  33.     style>  

  34.   head>  

  35.     

  36.   <body>  

  37.      <div class="container">  

  38.         <div id="nav_top">  

  39.               

  40.         div>  

  41.         <div id="table_teacher">  

  42.           

  43.     div>  

  44.     div>  

  45.       

  46.     <br>  

  47.   

  48.   body>  

  49.     

  50.   <script language="JavaScript">  

  51.        var $table=$('<table class="table table-hover">table>');  

  52.     $(document).ready(function(){  

  53.   

  54.         $("#nav_top").load("nav/nav_top.jsp");  

  55.         var s='${json}';    

  56.         var s=eval("("+s+")");  

  57.           

  58.         createTable("table_teacher",s);  

  59.     });  

  60.       

  61.       

  62.       

  63.         function createTable(div,s){  

  64.        // var $table=$('<table class="table table-hover " id="table_teacher_main" style="table-layout:fixed">table>');  

  65.         $("div").append($table);  

  66.         var $caption=$('<caption style="text-align:center;">jquery生成bootstrap表格caption>');  

  67.         $table.append($caption);  

  68.         var $thead=$('<thead>thead>');  

  69.         var $trs=$('<tr>tr>');  

  70.         var $th1=$('<th>姓名th>');  

  71.         var $th2=$('<th>年龄th>');  

  72.         var $th3=$('<th>电话th>');  

  73.         var $th4=$('<th>操作th>');  

  74.         $trs.append($th1);  

  75.         $trs.append($th2);  

  76.           $trs.append($th3);  

  77.          $trs.append($th4);  

  78.         $thead.append($trs);  

  79.         $table.append($thead);  

  80.        for(var p=0;p<s.length;p++){  

  81.          create_tbody(s[p].id,s[p].name,s[p].tel_phone);  

  82.        }  

  83.         

  84.     }  

  85.     function create_tbody(td1, td2, td3){  

  86.         var $tr = $('<tr class="tr_content">tr>');  

  87.         $table.append($tr);  

  88.         var $td1 = $('<td class="td_content1">' + td1 + 'td>');  

  89.         $tr.append($td1);  

  90.         var $td2 = $('<td class="td_content1">' + td2 + 'td>');  

  91.         $tr.append($td2);  

  92.         var $td3 = $('<td class="td_content1">' + td3 + 'td>');  

  93.         $tr.append($td3);  

  94.         var $td4 = $('<td width="10%">td>');  

  95.         var $edit = $('<span class="text-info edit_teacher" id="edit_teacher">编辑span>');  

  96.         var $delete = $('<span class="text-info delete_teacher" id="delete_teacher">删除span>');  

  97.         $td4.append($edit);  

  98.         $td4.append($delete);  

  99.         $tr.append($td4);  

  100.         <span style="color:#009900;">$(document).on("mouseover", ".tr_content", function(){  

  101.               

  102.                 $(this).children().each(function(){  

  103.                     $(this).find("span").show();  

  104.               

  105.                 });  

  106.         });  

  107.           

  108.         $(document).on("mouseout", ".tr_content", function(){  

  109.                 $(this).children().each(function(){  

  110.                     $(this).find("span").hide();  

  111.                   

  112.                 });  

  113.         });span>  

  114.     }  

  115.           

  116.           

  117.      

  118.   

  119.       

  120.  script>  

  121. html>