根据需求由于不同的表要在同一个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>
效果如下图所示：