生活随笔
收集整理的這篇文章主要介紹了
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的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
