大二下学期第一次结对作业（第二阶段）

数据查完之后并没有进行展示，今日主要完成了展示的功能：

首先展示只是把数据列出来是没有太大的困难的，简单修改一下样式与页面风格符合即可。

但是由于数据是分两次爬取的，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;
}