HTML+Layui实现日报表/月报表统计页面，动态选择日期、网点，显示频次排名
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='https://cdn.staticfile.org/layui/2.5.6/css/layui.css'>
</head>
<body>
<div class='layui-container'>
<div class='layui-row'>
<div class='layui-col-md-offset3 layui-col-md6'>
<form class='layui-form' lay-filter='reportForm'>
<div class='layui-form-item'>
<label class='layui-form-label'>日期</label>
<div class='layui-input-inline'>
<input type='text' name='date' id='date' class='layui-input' placeholder='请选择日期' autocomplete='off'>
</div>
<div class='layui-input-inline'>
<button type='button' class='layui-btn layui-btn-primary' id='today'>今天</button>
<button type='button' class='layui-btn layui-btn-primary' id='thisMonth'>本月</button>
</div>
</div>
<div class='layui-form-item'>
<label class='layui-form-label'>网点</label>
<div class='layui-input-inline'>
<select name='site' lay-verify='required' lay-search>
<option value=''>请选择网点</option>
<option value='site1'>网点1</option>
<option value='site2'>网点2</option>
<option value='site3'>网点3</option>
<option value='site4'>网点4</option>
<option value='site5'>网点5</option>
</select>
</div>
</div>
<div class='layui-form-item'>
<button type='button' class='layui-btn' lay-submit lay-filter='submit'>查询</button>
</div>
</form>
</div>
</div>
<div class='layui-row'>
<table class='layui-table'>
<thead>
<tr>
<th>网点</th>
<th>频次</th>
</tr>
</thead>
<tbody id='tableBody'>
<!-- 表格内容动态生成 -->
</tbody>
</table>
</div>
</div>
<script src='https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdn.staticfile.org/layui/2.5.6/layui.js'></script>
<script>
layui.use(['form', 'laydate'], function() {
var form = layui.form;
var laydate = layui.laydate;
// 初始化日期选择器
laydate.render({
elem: '#date',
type: 'date',
format: 'yyyy-MM-dd',
value: new Date()
});
// 今天按钮点击事件
$('#today').on('click', function() {
var today = new Date();
$('#date').val(today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate());
});
// 本月按钮点击事件
$('#thisMonth').on('click', function() {
var today = new Date();
var thisMonth = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + '01';
$('#date').val(thisMonth);
});
// 监听表单提交
form.on('submit(submit)', function(data) {
var date = data.field.date;
var site = data.field.site;
// 根据选择的日期和网点，发送请求获取数据
// 使用ajax发送请求，根据返回的数据动态生成表格内容
// 省略具体实现代码
return false; // 阻止表单提交
});
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qnPe 著作权归作者所有。请勿转载和采集!