大二下学期第一次结对作业(第二阶段)
数据查完之后并没有进行展示,今日主要完成了展示的功能:
首先展示只是把数据列出来是没有太大的困难的,简单修改一下样式与页面风格符合即可。
但是由于数据是分两次爬取的,details与world的表结构不同,查出的数据展示也不同,所以表头的部分就有问题了。
查询各个国家时希望为:
"<tr><th>日期</th>" + "<th>国家</th>" + "<th>累计确诊</th>" + "<th>累计治愈</th>" + "<th>累计死亡</th>" + "<th>现有确诊</th><tr>"
查询各省份时希望为:
"<tr><th>日期</th>" + "<th>省份</th>" + "<th>累计确诊</th>" + "<th>累计治愈</th>" + "<th>累计死亡</th>" + "<th>现有确诊</th><tr>"
查询市区是为:
"<tr><th>日期</th>" + "<th>省份</th>" + "<th>市区</th>" + "<th>累计确诊</th>" + "<th>累计治愈</th>" + "<th>累计死亡</th>" + "<th>现有确诊</th><tr>"
所以这就要动态添加表头,查出的数据要与表头对应。
这个可以用类选择器选中thead或tbody标签调用append()函数即可,但是这样也会有一个问题,就是数据一直是追加的,
新表头会在旧表头下,新的数据也还会在旧的数据下,我们希望把旧的表头数据求掉再追加新的,这可以用empty来实现。
下面为整个数据展示的代码:
<div class="map-table"> <table> <thead> </thead> <tbody> </tbody> </table> </div>
table td, table th { border: 1px solid #cad9ea; color: #666; height: 30px; } table thead tr th { background-color: #CCE8EB; width: 100px; } table tr:nth-child(odd) { background: #fff; } table tr:nth-child(even) { background: #F5FAFA; } .map-table{ position:absolute; height:720px; overflow:auto } .mainbox .column:nth-child(2) { flex: 5; margin: 0 0.125rem 0.1875rem; overflow: hidden; }
var btn = document.getElementById("query2"); btn.onclick = function(){ var fromyear=document.getElementById("fromyear").value; var fromday=document.getElementById("fromday").value; var frommounth=document.getElementById("frommounth").value; var toyear=document.getElementById("toyear").value; var today=document.getElementById("today").value; var tomounth=document.getElementById("tomounth").value; var continent=document.getElementById("continent").value; var country=document.getElementById("country").value; var province=document.getElementById("province").value; var city=document.getElementById("city").value; $.ajax({ url:"/query2", data: {fromyear: fromyear,fromday:fromday,frommounth:frommounth, toyear:toyear,today:today,tomounth:tomounth, continent:continent,country:country,province:province,city:city}, success: function (data) { if(province!="" || city!="" || country=="中国"){ if(city!=""||province!=""){ appendHtmlHead="<tr><th>日期</th>" + "<th>省份</th>" + "<th>市区</th>" + "<th>累计确诊</th>" + "<th>累计治愈</th>" + "<th>累计死亡</th>" + "<th>现有确诊</th><tr>" $(".map-table thead").empty(); $(".map-table thead").append(appendHtmlHead); $(".map-table tbody").empty(); for(var i=0;i<data.data.length;i++){ var Day=data.data[i][0].split(' ') appendHtmlBody="<tr><td>"+ Day[3]+Day[2]+Day[1]+"</td><td>" + data.data[i][1]+"</td><td>"+ data.data[i][2]+"</td><td>"+ data.data[i][3]+"</td><td>"+ data.data[i][4]+"</td><td>"+ data.data[i][5]+"</td><td>"+ (data.data[i][3]-data.data[i][4]-data.data[i][5])+"</td><tr>" $(".map-table tbody").append(appendHtmlBody); } } if(country=="中国"&&province==""&&city==""){ appendHtmlHead="<tr><th>日期</th>" + "<th>省份</th>" + "<th>累计确诊</th>" + "<th>累计治愈</th>" + "<th>累计死亡</th>" + "<th>现有确诊</th><tr>" $(".map-table thead").empty(); $(".map-table thead").append(appendHtmlHead); $(".map-table tbody").empty(); for(var i=0;i<data.data.length;i++){ var Day=data.data[i][0].split(' ') appendHtmlBody="<tr><td>"+ Day[3]+Day[2]+Day[1]+"</td><td>" + data.data[i][1]+"</td><td>"+ data.data[i][2]+"</td><td>"+ data.data[i][3]+"</td><td>"+ data.data[i][4]+"</td><td>"+ (data.data[i][2]-data.data[i][3]-data.data[i][4])+"</td><tr>" $(".map-table tbody").append(appendHtmlBody); } } } if(province=="" && city=="" && country!="中国"){ appendHtmlHead="<tr><th>日期</th>" + "<th>国家</th>" + "<th>累计确诊</th>" + "<th>累计治愈</th>" + "<th>累计死亡</th>" + "<th>现有确诊</th><tr>" $(".map-table thead").empty(); $(".map-table thead").append(appendHtmlHead); $(".map-table tbody").empty(); for(var i=0;i<data.data.length;i++) { var Day=data.data[i][0].split(' ') appendHtmlBody = "<tr><td>" + Day[3]+Day[2]+Day[1] + "</td><td>" + data.data[i][1] + "</td><td>" + data.data[i][2] + "</td><td>" + data.data[i][3] + "</td><td>" + data.data[i][4] + "</td><td>" + data.data[i][5] + "</td><td>" $(".map-table tbody").append(appendHtmlBody); } } if(data.data==""){ alert("暂无数据") } }, error: function (xhr, type, errorThrown) { } }) }
当然还有一个严重的问题,就是当查出的数据过多时,列表会过长,超出div,只需加一个滚轴即可。
table { border-collapse: collapse; margin: 0 auto; text-align: center; }