AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

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

  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
容器
关键词：
Bootstrap后台
JSON数据
Bootstrap jquery
Bootstrap表格
jQuery JSON
科技小能手
目录
相关文章
疯狂的猿
|
28天前
|
前端开发
基于CSS3+Bootstrap实现的侧边栏后台菜单源码
CSS3+Bootstrap实现的侧边栏后台菜单特效源码是一段基于Bootstrap和图标库制作的侧边栏菜单后台管理页面效果代码，简洁大方、易于管理，是一段非常不错的后台菜单栏效果，欢迎对此段代码感兴趣的朋友前来下载。
疯狂的猿
91 54
奔跑的数据
|
2月前
|
数据采集 JSON 数据处理
抓取和分析JSON数据：使用Python构建数据处理管道
在大数据时代，电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术，高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务，模拟真实用户行为，提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
奔跑的数据
58 1
抓取和分析JSON数据：使用Python构建数据处理管道
小王老师呀
|
1月前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象（如字典、列表）转换为 JSON 字符串，主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化，以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象，使用 `json.loads` 方法。文中还提供了具体的代码示例，展示了如何处理不同类型的 Python 对象。
小王老师呀
26 1
1842782014377483
|
1月前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据：从编码到解码
在现代Web开发中，JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据，包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法，可以显著提升JSON处理的性能，确保系统快速稳定运行。
1842782014377483
55 3
技术交流18179014480
|
1月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品，该接口返回的通常是一个JSON格式的响应，其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例，同时提供对其关键字段的解释
技术交流18179014480
41 0
运营研究坊
|
2月前
|
JSON JavaScript Java
在Java中处理JSON数据：Jackson与Gson库比较
本文介绍了JSON数据交换格式及其在Java中的应用，重点探讨了两个强大的JSON处理库——Jackson和Gson。文章详细讲解了Jackson库的核心功能，包括数据绑定、流式API和树模型，并通过示例演示了如何使用Jackson进行JSON解析和生成。最后，作者分享了一些实用的代码片段和使用技巧，帮助读者更好地理解和应用这些工具。
运营研究坊
159 0
在Java中处理JSON数据：Jackson与Gson库比较
范大脚脚
|
JavaScript
JQuery实现的后台框架（动易+Slashdot Menu）
范大脚脚
1339 0
哈你真皮
|
4天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后，子菜单以滑动的方式依次展开
哈你真皮
39 21
哈你真皮
|
5天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
哈你真皮
36 16
游客dng4gjyb342he
|
3天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽，可以通过CSS定制外观，支持无限循环模式，内置水平，垂直和淡入淡出三种轮播图过渡动画效果。
游客dng4gjyb342he
31 11