jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢?
找了好久,终于找到某位前辈的答案,在此表示衷心的感谢!
做了部分调整,做下笔记,下面便是这个html的情况。
- <html>
- <head>
- <title></title>
- <script type="text/javascript">
- var jsonArray = [{"编号":"001","名称":"小苹果","描述":"现代神曲,大妈的最爱"},{"编号":"002","名称":"mou宝","描述":"想怎么玩就怎么完"}];
- var headArray = [];
- function parseHead(oneRow) {
- for ( var i in oneRow) {
- headArray[headArray.length] = i;
- }
- }
- function appendTable() {
- parseHead(jsonArray[0]);
- var div = document.getElementById("div1");
- var table = document.createElement("table");
- var thead = document.createElement("tr");
- for ( var count = 0; count < headArray.length; count++) {
- var td = document.createElement("th");
- td.innerHTML = headArray[count];
- thead.appendChild(td);
- }
- table.appendChild(thead);
- for ( var tableRowNo = 0; tableRowNo < jsonArray.length; tableRowNo++) {
- var tr = document.createElement("tr");
- for ( var headCount = 0; headCount < headArray.length; headCount++) {
- var cell = document.createElement("td");
- cell.innerHTML = jsonArray[tableRowNo][headArray[headCount]];
- tr.appendChild(cell);
- }
- table.appendChild(tr);
- }
- div.appendChild(table);
- }
- </script>
- <style>
- table {
- width: 600px;
- padding: 0 ;
- margin: 100 auto;
- border-collapse: collapse;
- }
- td,th {
- border: 1px solid #ddd;
- padding: 6px 6px 6px 12px;
- color: #4f6b72;
- text-align: center;
- }
- th {
- background: #d3d3d3;
- }
- </style>
- </head>
- <body onload="appendTable(jsonArray);">
- <div id="div1"></div>
- </body>
- </html>
<html>
<head>
<title></title>
<script type="text/javascript">
var jsonArray = [{"编号":"001","名称":"小苹果","描述":"现代神曲,大妈的最爱"},{"编号":"002","名称":"mou宝","描述":"想怎么玩就怎么完"}];
var headArray = [];
function parseHead(oneRow) {
for ( var i in oneRow) {
headArray[headArray.length] = i;
}
}
function appendTable() {
parseHead(jsonArray[0]);
var div = document.getElementById("div1");
var table = document.createElement("table");
var thead = document.createElement("tr");
for ( var count = 0; count < headArray.length; count++) {
var td = document.createElement("th");
td.innerHTML = headArray[count];
thead.appendChild(td);
}
table.appendChild(thead);
for ( var tableRowNo = 0; tableRowNo < jsonArray.length; tableRowNo++) {
var tr = document.createElement("tr");
for ( var headCount = 0; headCount < headArray.length; headCount++) {
var cell = document.createElement("td");
cell.innerHTML = jsonArray[tableRowNo][headArray[headCount]];
tr.appendChild(cell);
}
table.appendChild(tr);
}
div.appendChild(table);
} </script>
<style>
table {
width: 600px;
padding: 0 ;
margin: 100 auto;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 6px 6px 6px 12px;
color: #4f6b72;
text-align: center;
}
th {
background: #d3d3d3;}
</style>
</head>
<body onload="appendTable(jsonArray);">
<div id="div1"></div>
</body>
</html>
效果如下图所示:
jsp页面根据json数据动态生成table的更多相关文章
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
- js将json数据动态生成表格
今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...
- 【转载】Jsp页面传Json数据到服务端,转对象或集合进行数据处理
需求:1.将页面数据带到服务端并转成对象,2.将页面的集合数据带到服务端转List实现:用ajax请求传递数据,数据格式为json JS方法: testJsonMethod = function(){ ...
- AJAX请求返回JSON数据动态生成html
1:DeliveryPersonVO对象 package com.funcanteen.business.entity.delivery.vo; import java.util.List; impo ...
- jQuery 根据JSON数据动态生成表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jQuery利用JSON数据动态生成表格
<style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; fon ...
- angular js根据json文件动态生成路由状态
项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...
- 动态生成Table内文字换行。
后台动态生成table,并把td内的文字进行换行. 前台: <body style="width:100%;height:540px;margin-left:0px;margin-to ...
- 利用在线工具根据JSon数据自动生成对应的Java实体类
如果你希望根据JSon数据自动生成对应的Java实体类,并且希望能进行变量的重命名,那么“JSON To Java”一定适合你.(下面的地址需要FQ) https://jsontojava.appsp ...
随机推荐
- [转]Business Model Canvas(商业模式画布):创业公司做头脑风暴和可行性测试的一大利器
本文转自:http://www.36kr.com/p/214438.html 本文来自First Round Review,他们准备的文章既讲故事,还同时向创业者提供可操作的建议,以助力打造优秀的公司 ...
- iOS Programming View Controllers 视图控制器
iOS Programming View Controllers 视图控制器 1.1 A view controller is an instance of a subclass of UIVi ...
- java JDK在windows及mac下安装配置
windows下安装: JDK下载 地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151. ...
- Redis缓存Object,List对象
一.到目前为止(jedis-2.2.0.jar),在Jedis中其实并没有提供这样的API对对象,或者是List对象的直接缓存,即并没有如下类似的API jedis.set(String key, O ...
- java格式化sql
在日志分析中,经常会对记录的sql进行分析,所以将一整行sql格式化,进行多行缩就显得很有必要,许多数据库客户端都提供sql的格式化功能,但复杂的多层嵌套sql往往格式化的l还不够友好,所以就自己造了 ...
- 【译】x86程序员手册36-9.9异常汇总
9.9 Exception Summary 异常汇总 Table 9-6 summarizes the exceptions recognized by the 386. Table 9-6. Exc ...
- 这是一条立了Flag的不归路
时间2017年7月11日 14:48:40 首次激活博客园的博客来进行学习记录,立下了不算远大的小目标,下一步就是要一步一步的往前走. Java是目前最普遍的使用语言之一,作为一名测试,本应该去学习更 ...
- 迅为电子4.3寸CAN总线工业平板电脑简介
型号:iTOP-HMI043-C 4.3寸CAN总线工业平板电脑支持CAN通讯显示器,显示:显示尺寸:4.3英寸:分辨率:480×272 TFT液晶 65536色 :接口:支持CAN 2.0B:USB ...
- Swift 关键字 inout - 让值类型以引用方式传递
两种参数传递方式 值类型 传递的是参数的一个副本,这样在调用参数的过程中不会影响原始数据. 引用类型 把参数本身引用(内存地址)传递过去,在调用的过程会影响原始数据. 在 Swift 众多数据类型中, ...
- Android ListView setEmptyView
http://my.eoe.cn/yaming/archive/879.html 1 当我们使用ListView或GridView的时候,当列表为空的时候,我们需要一个特殊的View来提示用户操作,于 ...