制作动态的表格js

最新推荐文章于 2022-09-26 16:49:40 发布

原创最新推荐文章于 2022-09-26 16:49:40 发布 · 561 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

5 篇文章

订阅专栏

oracle

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript生成复杂报表的方法。该方法可以根据指定的时间范围和车辆信息动态创建表格，用于展示不同日期的里程统计数据。文章详细展示了如何通过解析日期、组织数据结构以及遍历数据集来填充表格。

$(function(){
var dayArray = new Array();
var data = ${pagecontent};
//月明细报表
var monthDay = "${mileageDto.month}";
var sTime = "${mileageDto.startTime}";
var eTime = "${mileageDto.endedTime}";
if(null != monthDay && monthDay.length != 0){
var marray = monthDay.split("-");
var mm = marray[1];
var md = marray[2];
var yearMonth = marray[0]+"-"+mm;
var mTotalDay = new Date(mm,md,0).getDate();
for(var u=1;u<=mTotalDay;u++){
if(u<10){
dayArray.push(yearMonth+"-0"+u);
}
else{
dayArray.push(yearMonth+'-'+u);
}
}
}
//手动明细报表
if(null != sTime || sTime.length != 0){
var sarray = sTime.split("-");
var earray = eTime.split("-");
var sm = sarray[1];
var sd = sarray[2];
var em = earray[1];
var ed = earray[2];
var sTotalDay = new Date(sm,sd,0).getDate();
var eTotalDay = new Date(em,ed,0).getDate();
var tableHtml = "";

if( null != sTime || "" != sTime){
if(em>sm){
var flag = false;
for(var q=sd;q<=sTotalDay;q++){
dayArray.push(sarray[0]+"-"+sm+"-"+q);
if(q == sTotalDay){
flag=true;
}
}
if(flag = true ){
for(var r=1; r<=ed; r++){
dayArray.push(earray[0]+"-"+em+"-"+r);
}
}
}
else if(em == sm){
for(var s=sd;s<=ed;s++){
if(s < 10 && s != sd){
dayArray.push(sarray[0]+"-"+sm+"-0"+s);
}
else{
dayArray.push(sarray[0]+"-"+sm+"-"+s);
}
}
}
}
}

var tableHtml = "";
tableHtml = "<thead id=\"listTable\" class=\"table table-bordered table-hover\">"
+" <tr><th>序号</th>"
+"<th>车牌号\\日期</th>";
for(var i = 0; i < dayArray.length; i++){
tableHtml += "<th>" + dayArray[i] + "</th>";
}
tableHtml += "</tr></thead><tbody>";

var imeiArr = new Array();

$.each(data, function(z,item){
if($.inArray(item.licensePlate, imeiArr)){
imeiArr.push(item.licensePlate);
}
});

for(var k=0;k<imeiArr.length;k++){
tableHtml += "<tr><td>"+k+1+"</td><td>"+imeiArr[k]+"</td>";
for(var t=0;t<dayArray.length;t++)
{
tableHtml +="<td>"
var mileages = "";
$.each(data, function(p,itemObj){

if(imeiArr[k] == itemObj.licensePlate ){

if( dayArray[t] == itemObj.countDaytime)
{
mileages += itemObj.mileage;
}
}

});
if(mileages == ""){
tableHtml += "0";
}else{
tableHtml += mileages+'KM';
}
tableHtml +="</td>"
}
tableHtml += "</tr>";
}

tableHtml +="</tbody>";
document.getElementById("listTable").innerHTML = tableHtml;
})