动态修改table的thead

本文介绍了一个自动更新服务器数据的机制,该机制能够根据当前日期动态调整显示的日数据和月数据表头,确保展示的数据始终是最新的。通过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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值