生成名为Apply Leave和Leave Detail的两个折叠框，要求Apply Leave折叠框内包含一个名为Apply Leave的下拉菜单框，下拉菜单包含Annual Leave，No Pay Leave，Compensation Leave三项子菜单。要求监听该子菜单change事件，在点击子菜单时，显示名为Leave Start和Leave End日期选择框，并且设置为必选项。并且根据选择的日期自动生成Leave Days。Leave Detail折叠框内用表格的形式显示详细信息。两个折叠框可以根据页面大小自动变为横排或者竖排。生成完整PHP代码

时间: 2024-02-05 07:11:13 浏览: 122

以下是生成名为Apply Leave和Leave Detail的两个折叠框的完整PHP代码。请注意，该代码使用了Bootstrap框架和jQuery库。 ```php <!DOCTYPE html> <html> <head> <title>Apply Leave</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $("#leave-type").change(function(){ if($(this).val() == "Annual Leave" || $(this).val() == "No Pay Leave" || $(this).val() == "Compensation Leave"){ $("#leave-start, #leave-end").prop("required", true).show(); } else { $("#leave-start, #leave-end").prop("required", false).hide(); } }); $("#leave-start, #leave-end").change(function(){ var start = new Date($("#leave-start").val()); var end = new Date($("#leave-end").val()); var days = Math.round((end - start) / (1000 * 60 * 60 * 24)) + 1; $("#leave-days").val(days); }); $(window).resize(function(){ if($(window).width() < 768){ $(".panel-heading").removeClass("text-center").addClass("text-left"); $(".panel-body").removeClass("text-center").addClass("text-left"); $(".panel-body table").removeClass("table-responsive"); } else { $(".panel-heading").removeClass("text-left").addClass("text-center"); $(".panel-body").removeClass("text-left").addClass("text-center"); $(".panel-body table").addClass("table-responsive"); } }).trigger("resize"); }); </script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading text-center"> Apply Leave </div> <div class="panel-body text-center"> <form method="post"> <div class="form-group"> <label for="leave-type">Leave Type:</label> <select class="form-control" id="leave-type" name="leave-type" required> <option value="">Select Leave Type</option> <option value="Annual Leave">Annual Leave</option> <option value="No Pay Leave">No Pay Leave</option> <option value="Compensation Leave">Compensation Leave</option> <option value="Other">Other</option> </select> </div> <div class="form-group"> <label for="leave-start">Leave Start:</label> <input type="date" class="form-control" id="leave-start" name="leave-start" required> </div> <div class="form-group"> <label for="leave-end">Leave End:</label> <input type="date" class="form-control" id="leave-end" name="leave-end" required> </div> <div class="form-group"> <label for="leave-days">Leave Days:</label> <input type="number" class="form-control" id="leave-days" name="leave-days" readonly> </div> <button type="submit" class="btn btn-primary">Apply</button> </form> </div> </div> </div> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading text-center"> Leave Detail </div> <div class="panel-body"> <table class="table table-striped table-bordered table-responsive"> <thead> <tr> <th>Date</th> <th>Leave Type</th> <th>Leave Days</th> </tr> </thead> <tbody> <tr> <td>2021-01-01</td> <td>Annual Leave</td> <td>1</td> </tr> <tr> <td>2021-02-15</td> <td>No Pay Leave</td> <td>3</td> </tr> <tr> <td>2021-05-01</td> <td>Compensation Leave</td> <td>1</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </body> </html> ```

阅读全文

相关推荐

理解JavaScript中的this、new、apply和call

JavaScript 中的 this、call、apply 和 bind 方法详解

JavaScript call与apply深度解析

PHP页面的Apply Leave下拉菜单包含Annual Leave，No Pay Leave，Compensation Leave三项子菜单。要求监听该子菜单，并在点击子菜单时，查询数据库并在原网页内用表格输出查询的内容。生成PHP完整代码

leave_apply.rar_java 请假_sql选课系统_学生请假系统_请假

pandas使用apply多列生成一列数据的实例

自定义下拉选择框_winform_下拉选择框_

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

apply和call方法定义及apply和call方法的区别

利用xml和xsl自动生成菜单

apply和plyr1

SQL Server CROSS APPLY和OUTER APPLY的应用详解

Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

一个利用xml和xsl解释生成无限级的树形菜单的源程序

apply book

$sql = " SELECT * FROM leave_apply INNER JOIN event WHERE leave_apply.employee_id = event.employee_id ";含义

ExtJS组件配置：renderTo与applyTo的区别解析

SQL Server APPLY表运算符详解与示例

软考论文范例解读：信息系统项目管理与设计方法的应用

最新推荐

SQL Server CROSS APPLY和OUTER APPLY的应用详解

详谈pandas中agg函数和apply函数的区别

浅谈Scala的Class、Object和Apply()方法

一列保存多个ID(将多个用逗号隔开的ID转换成用逗号隔开的名称)

软考论文范例解读：信息系统项目管理与设计方法的应用

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能