将后端返回的数据在jsp中拼接成table列表
//先下载jquery js文件 放入项目中
jsp文件内容
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>用户列表</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></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">
<table id="table">
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
});
var jsonArray = [{"主键":"","租户ID":"小苹果","账号":"现代神曲，大妈的最爱","密码":"小00","昵称":"小00","真名":"小00","头像":"小00","邮箱":"小00","手机":"小00","生日":"小00","性别":"小00","角色id":"小00","部门id":"小00",}];
var headArray = [];
function parseHead(oneRow) {
for ( var i in oneRow) {
headArray[headArray.length] = i;
}
}
function appendTable() {
$.ajax({
type:"get",
url:"${pageContext.request.contextPath }/getUserInfo.do",
//data:{"id":id},
success:function(data) {
var datas=Array.from(data.data);
//alert(datas);
parseHead(data.data[0]);
var div = document.getElementById("div1");
//var table = document.createElement("table");
var table = document.getElementById("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 < data.data.length; tableRowNo++) {
var tr = document.createElement("tr");
for ( var headCount = 0; headCount < headArray.length; headCount++) {
var cell = document.createElement("td");
cell.innerHTML = data.data[tableRowNo][headArray[headCount]];
tr.appendChild(cell);
}
table.appendChild(tr);
}
div.appendChild(table);
}
});
}
</script>
</body>
</html>
