根据年月查询每月数据并渲染到页面，支持数据的展示与折叠隐藏
最近做手机端应用页面，根据开始年月、截止年月查询数据并渲染到页面里，数据条目可以展开与折叠，初始化时间为当前年月。
界面如下：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>查询</title> <script src="jquery-1.11.1.min.js"></script> <style> body{ margin: 0; padding: 0; } html,body{ font-size:16px; height:100%;} /*苹果手机上边框阴影*/ input{ outline: none; -webkit-appearance: none; /*去除系统默认的样式*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/ } footer{ width: 100%; } button.submit{ width: 150px; height: 2em; line-height: 2em; display: block; margin: 0 auto; border-radius: 4px; border: none; font-weight: bold; color:#fff; background-color:#4d8fd8; font-size: 1rem; } /*三角方向箭头*/ .icon_top{ display: table-cell; vertical-align: middle; width: 0; height:0; border-top: 0; border-left: 0.23rem solid transparent; border-right: 0.23rem solid transparent; border-bottom: 0.72rem solid #4d8fd8; } .icon_bottom{ display: table-cell; vertical-align: middle; width: 0; height:0; border-top: 0; border-left: 0.23rem solid transparent; border-right: 0.23rem solid transparent; border-top: 0.72rem solid #4d8fd8; } .text{ width: 90px; } .content{ width: 230px; } .content input{ width: 230px; height:22px; font-size: 1rem; border-radius: 0; border:solid 1px #999; margin:0; background-color: transparent; outline:none; box-shadow: 0 0 0 #fff; } button.submit{ margin-bottom: 20px; } /*list*/ #salaryDetail{ width: 100%; } #salaryDetail table{ width: 100%; margin: auto; padding:0 20px; border-top:solid 1px #ccc; } #salaryDetail table thead th{ text-align: left; } #salaryDetail table tbody.body-detail{ display: none; } </style> </head> <body> <table style=" margin: 20px auto;"> <tr style="height:50px;"> <td class="text">起始年月</td> <td class="content"> <input type="month" id="beginDate" /> </td> </tr> <tr style="height:50px;"> <td class="text">截止年月</td> <td class="content"> <input type="month" id="endDate" /> </td> </tr> </table> <footer><button class="submit" onclick="submit()">查询</button></footer> <div id="salaryDetail"></div> <script type="text/javascript"> document.getElementById('beginDate').valueAsDate = new Date(); document.getElementById('endDate').valueAsDate = new Date(); function submit() { var beginDate = $("#beginDate").val(); var endDate = $("#endDate").val(); var minY = 2000; var beginY = beginDate.substr(0,4); var beginM = beginDate.substr(5,2); var endY = endDate.substr(0,4); var endM = endDate.substr(5,2); var monthDiffer = (endY-beginY)*12 + (endM-beginM); if(beginY<minY){ alert("仅支持查询2016年及以后工资情况"); return } if(beginDate>endDate){ alert("截止年月必须大于等于起始年月"); return } if(monthDiffer>=6){ alert("时间范围错误，仅可查询6个月以内的工资"); return } //造数据 var detailList = [{ 'year':2019, 'month':6, '工资实发':8000, '奖金': 2000 },{ 'year':2019, 'month':7 }]; //渲染页面 $("#salaryDetail").html(""); var dateListHtml = ""; if(detailList && detailList.length>0){ for(var i=0; i<detailList.length;i++){ var monthObj = detailList[i]; //主title var year = monthObj.year; var month = monthObj.month; var salaryLast = monthObj.工资实发; //判断有无数据 if(!salaryLast){ dateListHtml += '<table><thead><tr><th>'+year+'年'+month+'月</th><th>无记录</th></th></tr></thead></table>' continue } dateListHtml += '<table><thead><tr>' + '<th>'+year+'年'+month+'月</th>'+ '<th>工资实发</th>'+ '<th>'+salaryLast+'元</th>'+ '<th><span class="icon_bottom" onclick="listTypeToggle(this)"></span></th>'+ '</tr></thead><tbody class="body-detail">' //详细 for(var key in monthObj){ if(key=="year" || key=="month"){ continue } dateListHtml += '<tr>'+ '<td colspan="2">'+key+'</td>'+ '<td colspan="2">'+monthObj[key]+'</td>'+ '</tr>' } dateListHtml += '</tbody></table>' } $("#salaryDetail").append(dateListHtml); }else{ alert("查询不到满足条件的数据"); return } } //list数据展开、折叠、三角箭头切换 function listTypeToggle(obj){ var tbodyHtml = obj.parentNode.parentNode.parentNode.nextElementSibling; if(tbodyHtml.style.display != "table-row-group" ){ obj.className = "icon_top" tbodyHtml.style.display = 'table-row-group'; }else{ obj.className = "icon_bottom" tbodyHtml.style.display = 'none'; } } </script> </body> </html>
