根据年月查询每月数据并渲染到页面，支持数据的展示与折叠隐藏

最近做手机端应用页面，根据开始年月、截止年月查询数据并渲染到页面里，数据条目可以展开与折叠，初始化时间为当前年月。

界面如下：

代码如下：

<!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];//主titlevar 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" οnclick="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>

转载于:https://www.cnblogs.com/Fourteen-Y/p/11097774.html

根据年月查询每月数据并渲染到页面，支持数据的展示与折叠隐藏相关推荐

小程序获取上一页的数据修改上一个页面的数据
小程序获取上一页的数据修改上一个页面的数据详情地址http://www.xiaoshu168.com/wxapplet/233.html
【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？
前言上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
el-table 大数据量渲染，页面卡顿的解决方案
原文: el-table大数据量渲染卡顿的解决方案描述: 当el-table的数据有成千上万条,且在同一页全部展示,此时页面渲染的dom太多可能造成页面卡顿原因: 因为数据量过多导致浏览器渲染过多 ...
ajax获取数据后渲染到页面方法
$.ajax({url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:for ...
浏览器填写数据，跳转页面返回数据不消失
步骤一:点击按钮,保存数据,跳转页面 $("#userAgree").on("click",function(){var obj = {};obj.userna ...
methods中axios里的数据无法渲染到页面
最近在研究axios聊天室室遇到一个问题将axios获取到的数据传递给data,从而改变页面中的数值,但是结果令人失望这是data里的数据原想将data中的items数组换成axios里的res ...
微信小程序wx.request请求服务器json数据并渲染到页面
微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx ...
vue中拿到接口，并获取数据，渲染到页面
首先index.html完成的是单页面展示,app.vue里面已经写了视图出口, 例如;先新建一个role.vue页面,写上相应的布局和内容,然后在路由中添加这个页面. 然后开始写渲染数据的方法前提 ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
大数据意味着向黑客暴露更多数据？
本文讲的是大数据意味着向黑客暴露更多数据,当有朋友问我是否了解"大数据"的安全问题时,我想到的是,大数据只是更多的数据,所以大数据面对着与其他数据相同的问题,是这样吗? 这似乎过度 ...

根据年月查询每月数据并渲染到页面，支持数据的展示与折叠隐藏

根据年月查询每月数据并渲染到页面，支持数据的展示与折叠隐藏相关推荐

最新文章

热门文章