jsp页面根据json数据动态生成table

根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容，对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢？

找了好久，终于找到某位前辈的答案，在此表示衷心的感谢！

做了部分调整，做下笔记，下面便是这个html的情况。

[html] view plaincopyprint?

<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 οnlοad="appendTable(jsonArray);"><div id="div1"></div>
</body>
</html>

效果如下图所示：

jsp页面根据json数据动态生成table相关推荐

vue 渲染JSON数据动态生成表格组件
vue 通过渲染JSON数据动态生成表头及对应表格内容组件 <template><div id="viewDialog"><el-button typ ...
layui做折线图_详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏
layuiAdmin单页版根据后台使用模板方式加载菜单 lay-url="菜单接口" lay-headers="将token带入请求头",如果没有,去掉就行 ...
自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...
highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .
最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 $(documen ...
JSON格式化动态生成表格表格转置行列转换 Excel导出
先看效果初始化: JSON格式化 : 生成表格-方式1 : 生成表格-方式2 : Excel导出需要行求和.列求和功能的查看 JSON格式化动态生成表格表格转置行列转换 Excel导出行求 ...
ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
python生成条形图-Python处理JSON数据并生成条形图
一.JSON 数据准备首先准备一份 JSON 数据,这份数据共有 3560 条内容,每条内容结构如下: 本示例主要是以 tz(timezone 时区) 这一字段的值,分析这份数据里时区的分布情况. ...
.net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml)
.net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml) 首先设置 Startup.cs 文件配置 ConfigureServices services.AddM ...
去除JSP页面中JSTL、EL生成的空行
前言 JSP 2.1+ tomcat 6.0+ JSP页面中JSTL.EL生成空行 JSP页面中,用到JSTL.EL时,会自动生成空行. 这个问题遇到循环时,情况会更严重. trimDirective ...

jsp页面根据json数据动态生成table

jsp页面根据json数据动态生成table相关推荐

最新文章

热门文章