bootstrap,jquery利用后台传入的json数据创建动态表格

发布时间:2020-08-05 22:05:46 作者:matengbing
来源:网络 阅读:5480
  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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

  9. <html>  

  10.   <head>  

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

  12.       

  13.     <title>My JSP 'showTeachers.jsp' starting page</title>  

  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 rel="stylesheet" type="text/css" href="styles.css"> 

  22.     -->  

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

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

  25.         </script>  

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

  27.     <style>  

  28.         #edit_teacher{  

  29.             padding-right:15px;  

  30.         }  

  31.         #edit_teacher,#delete_teacher{  

  32.             cursor:pointer;  

  33.             display:none;  

  34.         }  

  35.     </style>  

  36.   </head>  

  37.     

  38.   <body>  

  39.      <div class="container">  

  40.         <div id="nav_top">  

  41.               

  42.         </div>  

  43.         <div id="table_teacher">  

  44.           

  45.     </div>  

  46.     </div>  

  47.       

  48.     <br>  

  49.   

  50.   </body>  

  51.     

  52.   <script language="JavaScript">  

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

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

  55.   

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

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

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

  59.           

  60.         createTable("table_teacher",s);  

  61.     });  

  62.       

  63.       

  64.       

  65.         function createTable(div,s){  

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

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

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

  69.         $table.append($caption);  

  70.         var $thead=$('<thead></thead>');  

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

  72.         var $th2=$('<th>姓名</th>');  

  73.         var $th3=$('<th>年龄</th>');  

  74.         var $th4=$('<th>电话</th>');  

  75.         var $th5=$('<th>操作</th>');  

  76.         $trs.append($th2);  

  77.         $trs.append($th3);  

  78.           $trs.append($th4);  

  79.          $trs.append($th5);  

  80.         $thead.append($trs);  

  81.         $table.append($thead);  

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

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

  84.        }  

  85.         

  86.     }  

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

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

  89.         $table.append($tr);  

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

  91.         $tr.append($td1);  

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

  93.         $tr.append($td2);  

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

  95.         $tr.append($td3);  

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

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

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

  99.         $td4.append($edit);  

  100.         $td4.append($delete);  

  101.         $tr.append($td4);  

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

  103.               

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

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

  106.               

  107.                 });  

  108.         });  

  109.           

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

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

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

  113.                   

  114.                 });  

  115.         });</span>  

  116.     }  

  117.           

  118.           

  119.      

  120.   

  121.       

  122.  </script>  

  123. </html> 


推荐阅读:
  1. jquery获取json数据
  2. 我的jQuery动态表格插件二

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery bootstrap 动态表格

上一篇:   挑战独立开发项目能力--IT蓝豹

下一篇:mysql5.7安装过程中出现的问题以及解决办法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》