html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <link rel="stylesheet" href="./css/qingqiu.css"> 9 <script src="./js/jquery-3.6.0.js"></script> 10 <script src="./js/qingqiu.js"></script> 11 </head> 12 <body> 13 <table id="qin_q"> 14 <tr> 15 <td>昨日预估收益</td> 16 <td>本月收益</td> 17 <td>累计收益</td> 18 <td>已结算金额</td> 19 <td>未结算金额</td> 20 </tr> 21 22 </table> 23 <table id="qin"> 24 <tr> 25 <th>序号</th> 26 <th>ADPID</th> 27 <th>广告位名称</th> 28 <th>广告类型</th> 29 <th>预估收益</th> 30 <th>操作</th> 31 </tr> 32 33 </table> 34 </body> 35 </html>
css代码
1 *{
2 padding:0px;
3 margin: 0px;
4 font-family:微软雅黑;
5 }
6 html,body{
7 width:100%;
8 height:100;
9 }
10 a{
11 text-decoration: none;
12 color: #333;
13
14 }
15 ul,ol,li{
16 list-style:none;
17 }
18 table{
19 width: 80%;
20 }
21 tr{
22 width: 300px;
23 line-height: 50px;
24 text-align: center;
25 }
26 button{
27 border-radius: 20px;
28 border: none;
29 width: 120px;
30 height: 50px;
31 background-color: greenyellow;
32 color: white;
33 }
34 #qin{
35 margin-top: 20px;
36 }
37 #qin_q{
38 border: 1px solid #333;
39 }
jQuery进行ajax渲染
$(function(){
$.ajax({
//地址
url:'http://www.unidatas.site/homeapi/listApi.php?phone=18032885735',
type:'get',
dataType:'json',
success:function(res){
console.log(res)
let data = res.detail.rowlist
data.forEach(function(ele,index){
console.log(ele);
let htm=` <tr>
<td>${index+1}</td>
<td>${ele.adpid}</td>
<td>${ele.ad_name}</td>
<td>${ele.ad_type}</td>
<td>${ele.ygsy}</td>
<td><button>查看应用数据</button></td>
</tr>`
$("#qin").append($(htm))
})
let col = res.total.rowlist
let ht =` <tr>
<td>${col.income_month}</td>
<td>${col.income_total}</td>
<td>${col.income_yesterday}</td>
<td>${col.settled}</td>
<td>${col.unsettled}</td>
</tr>`
$("#qin_q").append($(ht))
},
error:function(){
alert('服务器错误')
}
})
})
标签：jquery,渲染,res,ele,width,ajax,let,col From： https://www.cnblogs.com/BlogRegisterqin/p/17219839.html