备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2017-11-12 1204
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

  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

文章标签：
前端开发
JavaScript
Java
数据格式
JSON
容器
关键词：
JSON数据
JSON表格
jQuery Bootstrap
Bootstrap jquery
jQuery数据
科技小能手
目录
相关文章
冷水鱼。
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
冷水鱼。
11 0
阿里云瑶池数据库SelectDB
|
1月前
|
存储 JSON Apache
揭秘 Variant 数据类型：灵活应对半结构化数据，JSON查询提速超 8 倍，存储空间节省 65%
在最新发布的阿里云数据库 SelectDB 的内核 Apache Doris 2.1 新版本中，我们引入了全新的数据类型 Variant，对半结构化数据分析能力进行了全面增强。无需提前在表结构中定义具体的列，彻底改变了 Doris 过去基于 String、JSONB 等行存类型的存储和查询方式。
阿里云瑶池数据库SelectDB
133 1
揭秘 Variant 数据类型：灵活应对半结构化数据，JSON查询提速超 8 倍，存储空间节省 65%
雪梅零落
|
7天前
|
存储 JSON JavaScript
「Python系列」Python JSON数据解析
在Python中解析JSON数据通常使用`json`模块。`json`模块提供了将JSON格式的数据转换为Python对象（如列表、字典等）以及将Python对象转换为JSON格式的数据的方法。
雪梅零落
24 0
念广隶
|
11天前
|
存储 JSON 数据挖掘
python逐行读取txt文本中的json数据，并进行处理
Python代码示例演示了如何读取txt文件中的JSON数据并处理。首先，逐行打开文件，然后使用`json.loads()`解析每一行。接着，处理JSON数据，如打印特定字段`name`。异常处理包括捕获`JSONDecodeError`和`KeyError`，确保数据有效性和字段完整性。将`data.txt`替换为实际文件路径运行示例。
念广隶
11 2
穆雄雄.
|
29天前
|
JSON 数据格式
糊涂工具类（hutool）post请求设置body参数为json数据
糊涂工具类（hutool）post请求设置body参数为json数据
穆雄雄.
19 1
穆雄雄.
|
30天前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
穆雄雄.
11 0
泡沫o0
|
1月前
|
JSON 并行计算 API
使用CJSON/Nlohmann：快速简便地在C/C++中处理JSON数据
使用CJSON/Nlohmann：快速简便地在C/C++中处理JSON数据
泡沫o0
81 0
静看风起
|
1月前
|
JSON 数据格式 Python
Python生成JSON数据
Python生成JSON数据
静看风起
22 0
灰灰快醒醒
|
1月前
|
JSON 数据可视化 Linux
数据可视化工具JSON Crack结合内网穿透实现公网访问
数据可视化工具JSON Crack结合内网穿透实现公网访问
灰灰快醒醒
37 1
数据可视化工具JSON Crack结合内网穿透实现公网访问
1932836719192345
|
2月前
|
JSON fastjson Java
FastJSON操作各种格式的JSON数据
FastJSON处理各种格式的JSON数据
1932836719192345
35 2