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

简介:
  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 $th1=$('<th>姓名</th>');  

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

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

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

  76.         $trs.append($th1);  

  77.         $trs.append($th2);  

  78.           $trs.append($th3);  

  79.          $trs.append($th4);  

  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> 


 本文转自 matengbing 51CTO博客,原文链接:http://blog.51cto.com/matengbing/1874999

相关文章
|
2天前
|
存储 JSON JavaScript
使用Python处理JSON格式数据
使用Python处理JSON格式数据
|
3天前
|
JSON JavaScript 测试技术
掌握JMeter:深入解析如何提取和利用JSON数据
Apache JMeter教程展示了如何提取和使用JSON数据。创建测试计划,包括HTTP请求和JSON Extractor,设置变量前缀和JSON路径表达式来提取数据。通过Debug Sampler和View Results Tree监听器验证提取结果,然后在后续请求和断言中使用这些数据。此方法适用于复杂测试场景,提升性能和自动化测试效率。
8 0
|
1天前
|
JSON API 数据格式
如何用 Python 的 requests 库发送 JSON 数据的 POST 请求
使用 requests 库发送 JSON 数据的 POST 请求是一个非常简单且实用的操作。通过将目标 URL 和 JSON 数据传递给 requests.post 方法,你可以轻松发送请求并处理响应。本篇文章介绍了从安装 requests 库,到发送 JSON 数据的 POST 请求,再到处理响应的整个流程。希望这篇文章能帮助你更好地理解并应用这个强大的 HTTP 请求库。
|
1天前
|
JSON Go 数据格式
【golang】json数据解析 - 嵌套json解析
【golang】json数据解析 - 嵌套json解析
5 0
|
3天前
|
JSON 数据格式 Python
python3 服务端使用CGI脚本处理POST的Json数据
python3 服务端使用CGI脚本处理POST的Json数据
20 6
|
3天前
|
JSON Java 数据格式
java读取接口返回的json数据 (二)
java读取接口返回的json数据 (二)
16 5
|
3天前
|
JSON Java 数据格式
java读取接口返回的json数据
java读取接口返回的json数据
17 5
|
7天前
|
存储 JSON 分布式计算
DataWorks产品使用合集之如何在数据服务中处理JSON数据
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
29 11
|
10天前
|
JSON JavaScript IDE
JSON 数据格式化方法
JSON 数据格式化方法
23 3
|
12天前
|
XML 存储 JSON
51. 【Android教程】JSON 数据解析
51. 【Android教程】JSON 数据解析
21 2