动态修改table的thead

来源:互联网 发布:网络试点高校 编辑:程序博客网 时间:2024/06/05 08:36
<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>
0 0