将后端返回的数据在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>

　　

posted @ 2020-10-12 14:04  红尘沙漏  阅读(788)  评论(0)    收藏  举报