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 ...
随机推荐
- iOS9导入高德地图报错App Transport Security has blocked...
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Te ...
- sed练习第一节
ed语法和基本命令 employee.txt文件内容如下: 101,John Doe,CEO 102,Jason Smith,IT Manager 103,Raj Reddy,Sysadmin 104 ...
- AJPFX: Java基础多线程(一)
多线程是Java学习的非常重要的方面,是每个Java程序员必须掌握的基本技能.本文只是多线程细节.本质的总结,并无代码例子入门,不适合初学者理解.初学者学习多线程,建议一边看书.看博文,以便写代码尝试 ...
- AJPFX总结面向对象思想设计原则
面向对象思想设计原则 A.单一职责原则 其实就是开发人员经常说的”高内聚,低耦合” 也就是说,每个类应该只有一个职责,对外只能提供一种功能,而引起类变化的原 ...
- 萌新--关于vue.js入门及环境搭建
十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了 ...
- 使用VirtualBox的时候虚拟机无法ping通windows主机,但是主机可以ping通虚拟机
问题原因是windows开启了防火墙导致的,将windows的防火墙关闭即可. 关闭windows防火墙后会有警告的信息出现,直接无视即可.
- React全家桶之一 react-router之高级
使用query获取URL中的参数 //引入相关的依赖 const Page = props => <div> <h1>{props.location.query.mess ...
- iOS Programming State Restoration 状态存储
iOS Programming State Restoration 状态存储 If iOS ever needs more memory and your application is in the ...
- MSSQL数据库事务处理
在日常应用中通常需要多人执行多表的操作,比如售票系统的售票功能,这时候就涉及到数据读取的一致性问题,好在MSSQL数据库也提供了事务处理功能,这里就简单的记下 语法: Begin Tran //事务处 ...
- SCCM大致安装过程,参考前辈教程完成部署
本安装sccm主站点服务器准备 参考:http://stephen1991.blog.51cto.com/8959108/1529864 1. 准备三台服务器 ,注:所有服务器需要安装 .net3. ...