前端展示截图
https://images.cnblogs.com/cnblogs_com/LiuFqiang/1429011/o_D09Q55)EL1VFEIJ(GKI%7D%7DY5.png
<!DOCTYPE html>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var date = "";
$.ajax({
url: "https://api.apiopen.top/musicRankings", //接口地址
type: "GET", //请求方法
ContentType: "aplication/json", //返回数据类型
success: function(response){ //请求成功回调函数
if(response.code == 200){
console.log(response)
data = response.result;
var tr = "";
var listTr = "";
for(var i = 0; i < data.length; i++){
tr += "<tr><td><img class='title_pic' src=" + data[i].pic_s210 +" title='" + data[i].name+ "' onclick='listDetail("+i+")'></td><tr>"
var list = data[i].content;
for(var j=0; j < list.length; j++){
listTr += "<tr class='list_item'><td>" + parseInt(j+1) + "</td>"
listTr += "<td width='30px' class='top_icon'>↑</td>"
listTr += "<td width='10%'><img src=" + list[j].pic_small + "></td>"
listTr += "<td>" + list[j].title +"</td>"
listTr += "<td>" + list[j].author +"</td>"
listTr += "<td>" + list[j].album_title +"</td></tr>"
$("#music_menu").append(tr);
$("#music_list").append(listTr)
function listDetail(typeCode){
var music_datail = "<div>"+data[typeCode].comment+"<img src='"+ data[typeCode].pic_s444+"''></div>"
$("#music_list").html(music_datail)
</script>
<style type="text/css">
#box_content{width: 60%;margin: auto;}
#box_left{width: 20%;float: left}
#box_right{width: 80%;float:left;}
.list_item{height: 70px;background: #fff;}
.list_item img{width: 55px;height: 55px;}
#music_menu img{width: 200px}
.tb_bottom{height: 10px;background: red}
#music_list tr td{border-bottom: 2px solid #eee;font-size: 0.9em}
.top_icon {color:#db5800}
</style>
</head>
<div id="box_content">
<div id="box_left">
<table id="music_menu" border="0" cellpadding="0" cellspacing="0">
</table>
<img src="http://ubmcmm.baidustatic.com/media/v1/0f000FIDhoa4I7Cp3sJqZf.jpg" title="" alt="" border="0" height="220" width="150">
</div>
<div id="box_right">
<img src="http://d.yoyi.tv/plus/plus4/2019/11/21/1802350445257321.jpg">
</div>
<table id="music_list" >
<tr><tH colspan="4">标题</tH><tH>歌手</tH><th>专辑</th></tr>
</table>
</div>
</div>
</body>
</html>
EL1VFEIJ(GKI%7D%7DY5.png){kind=link}