java中根据后端返回的数据加载table列表
<%//引入 js
@ 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> <script type="text/javascript" src="./js/vue.js"></script> </head> <body > <table border="1" cellspacing="1" cellpadding="1" id="tab" > <tr v-for="cl in classs"> <th>{{cl.id}}</th> <th>{{cl.tenant_id}}</th> <th>{{cl.code}}</th> <th>{{cl.account}}</th> <th>{{cl.password}}</th> <th>{{cl.real_name}}</th> <th>{{cl.avatar}}</th> <th>{{cl.email}}</th> <th>{{cl.phone}}</th> <th>{{cl.sex}}</th> <th>{{cl.role_id}}</th> <th>{{cl.dept_id}}</th> <th>{{cl.create_user}}</th> <th>{{cl.create_time}}</th> </tr> <tr v-for="(item,index) in info"> <th>{{item.id}}</th> <th>{{item.tenant_id}}</th> <th>{{item.code}}</th> <th>{{item.account}}</th> <th>{{item.password}}</th> <th>{{item.real_name}}</th> <th>{{item.avatar}}</th> <th>{{item.email}}</th> <th>{{item.phone}}</th> <th>{{item.sex}}</th> <th>{{item.role_id}}</th> <th>{{item.dept_id}}</th> <th>{{item.create_user}}</th> <th>{{item.create_time}}</th> <td><button type="button" @click="del(index)">删除</button></td> </tr> </table> <script type="text/javascript"> new Vue({ el:'#tab', data:{ classs:[ {id:'用户id',tenant_id:'租户id',code:'用户编号',account:'账号',password:'密码',name:'昵称',real_name:'真名',avatar:'头像',email:'邮箱',phone:'手机',birthday:'生日',sex:'性别',role_id:'角色id',dept_id:'部门id',create_user:'创建人',create_dept:'创建部门',create_time:'创建时间',update_user:'修改人'} ], msg:{id:'ID',name:'名字',inf:'描述',behavior:'操作'}, info:[ {id:'1',name:'a',inf:'amorous'}, {id:'2',name:'b',inf:'beautiful'}, {id:'3',name:'c',inf:'clever'}, {id:'4',name:'d',inf:'delicious'}, ] }, created(){ this.getList(); }, methods:{ getList:function(index){ $.ajax({ type:"get", url:"${pageContext.request.contextPath }/getUserInfo.do", //data:{"id":id}, success:data=>{ console.log(this) this.info=data.data; } }) }, del:function(index){ alert("删除") } } }) </script> </body> </html>
2.方法二
<%@ 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>
