动态修改table的thead

最新推荐文章于 2021-11-17 01:20:56 发布

原创最新推荐文章于 2021-11-17 01:20:56 发布 · 6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #数据

个人总结专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个自动更新服务器数据的机制，该机制能够根据当前日期动态调整显示的日数据和月数据表头，确保展示的数据始终是最新的。通过JavaScript实现，可以应用于各种需要定期更新数据的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="day_data" style="display: none">
        <table id="day_data_table" class="table table-bordered">
            <thead>
            <tr>
                <th>服务器/日</th>
                <th>5.1</th>
                <th>5.2</th>
                <th>5.3</th>
                <th>5.4</th>
                <th>5.5</th>
                <th>5.6</th>
                <th>5.7</th>
                <th>总计</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>3区力拔山河</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
            </tr>
            <tr>
                <td>2区横扫千军</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
            </tr>
            <tr>
                <td>1区艾泽拉斯</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
            </tr>
            </tbody>
        </table>
    </div>
    
    <div class="month_data" style="display: none">
        <table id="month_data_table" class="table table-bordered">
            <thead>
            <tr>
                <th>服务器/月份</th>
                <th>6</th>
                <th>5</th>
                <th>4</th>
                <th>3</th>
                <th>2</th>
                <th>1</th>
                <th>总计</th>
            </tr>
 
            </thead>
            <tbody>
            <tr>
                <td>3区力拔山河</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
            </tr>
            <tr>
                <td>2区横扫千军</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
 
            </tr>
            <tr>
                <td>1区艾泽拉斯</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
                <td>1000/900</td>
            </tr>
            </tbody>
        </table>
    </div>
 
 
 
 
<script>
    $(document).ready(function(){
        var date = new Date();
        console.log('year:',date.getFullYear());
        console.log('month:',date.getMonth()+1);
        console.log('day:',date.getDate());
        var day_tb = document.getElementById("day_data_table");
        var month_tb = document.getElementById("month_data_table");
        var day = date.getDate();
        var month = date.getMonth()+1;
        var monthMulti = month / 6;
        var dayMulti = day / 7;
        if( dayMulti > 0){
            day_tb.removeChild(day_tb.children[0]);
            console.log('8-9-10-11-12-13-14');
            var html = "<th>服务器/日</th>";
            html += "<th>"+month+"."+String(day)+"</th>";
            html += "<th>"+month+"."+String(day-1)+"</th>";
            html += "<th>"+month+"."+String(day-2)+"</th>";
            html += "<th>"+month+"."+String(day-3)+"</th>";
            html += "<th>"+month+"."+String(day-4)+"</th>";
            html += "<th>"+month+"."+String(day-5)+"</th>";
            html += "<th>"+month+"."+String(day-6)+"</th>";
            html += "<th>总计</th>";
            var th = document.createElement("thead");
            th.innerHTML = html;
            day_tb.insertBefore(th, day_tb.children[0]);
 
        }
        if( monthMulti > 0){
            month_tb.removeChild(month_tb.children[0]);
            console.log('8-9-10-11-12-13-14');
            var html = "<th>服务器/</th>";
            html += "<th>"+String(month)+"</th>";
            html += "<th>"+String(month-1)+"</th>";
            html += "<th>"+String(month-2)+"</th>";
            html += "<th>"+String(month-3)+"</th>";
            html += "<th>"+String(month-4)+"</th>";
            html += "<th>"+String(month-5)+"</th>";
            html += "<th>"+String(month-6)+"</th>";
            html += "<th>总计</th>";
            var th = document.createElement("thead");
            th.innerHTML = html;
            month_tb.insertBefore(th, month_tb.children[0]);
 
        }
    });
</script>