数据库中只有2022/09/01~2023/05/01的月度薪资发放记录。PHP页面有两个下拉菜单,分别是选择年份和月份。当页面加载完成时,发送 AJAX 请求获取可选年份,将年份添加到下拉菜单中,监听下拉菜单的 change 事件,获取所选年份,再发送 AJAX 请求获取可选月份,将月份添加到第二个下拉菜单的子菜单中,且子菜单默认值为‘select month’。监听月份下拉菜单的 change 事件,获取所选月份,并发送 AJAX 请求获取薪资记录,将记录添加到表格中。注意,监听年份下拉菜单获取年份时,如果更改所选年份,则月份下拉菜单需要清空并重新获取月份。生成可以实现该功能的完整代码。
时间: 2023-12-21 10:05:55 浏览: 126
以下是可以实现该功能的完整代码:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>月度薪资发放记录</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<label for="year">选择年份:</label>
<select id="year">
<option value="0">--请选择--</option>
</select>
<label for="month">选择月份:</label>
<select id="month">
<option value="0">--请选择--</option>
</select>
<table id="salaryTable">
<thead>
<tr>
<th>员工姓名</th>
<th>工号</th>
<th>薪资</th>
<th>发放日期</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="js/salary.js"></script>
</body>
</html>
```
JavaScript部分:
```
$(document).ready(function() {
//获取可选年份
$.ajax({
type: "GET",
url: "getYear.php",
dataType: "json",
success: function(data) {
$.each(data, function(i, item) {
$("#year").append("<option value='" + item.year + "'>" + item.year + "</option>");
});
}
});
//监听年份下拉菜单的change事件
$("#year").change(function() {
var year = $(this).val();
if (year == 0) {
$("#month").empty();
$("#month").append("<option value='0'>--请选择--</option>");
$("#salaryTable tbody").empty();
return;
}
//获取可选月份
$.ajax({
type: "GET",
url: "getMonth.php?year=" + year,
dataType: "json",
success: function(data) {
$("#month").empty();
$("#month").append("<option value='0'>--请选择--</option>");
$.each(data, function(i, item) {
$("#month").append("<option value='" + item.month + "'>" + item.month + "</option>");
});
}
});
});
//监听月份下拉菜单的change事件
$("#month").change(function() {
var year = $("#year").val();
var month = $(this).val();
if (month == 0) {
$("#salaryTable tbody").empty();
return;
}
//获取薪资记录
$.ajax({
type: "GET",
url: "getSalary.php?year=" + year + "&month=" + month,
dataType: "json",
success: function(data) {
$("#salaryTable tbody").empty();
$.each(data, function(i, item) {
var tr = "<tr><td>" + item.name + "</td><td>" + item.id + "</td><td>" + item.salary + "</td><td>" + item.date + "</td></tr>";
$("#salaryTable tbody").append(tr);
});
}
});
});
});
```
PHP部分:
getYear.php
```
<?php
require_once("dbconnect.php");
$sql = "SELECT DISTINCT YEAR(date) AS year FROM salary ORDER BY year DESC";
$result = mysqli_query($conn, $sql);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = array("year" => $row["year"]);
}
mysqli_close($conn);
echo json_encode($data);
?>
```
getMonth.php
```
<?php
require_once("dbconnect.php");
$year = $_GET["year"];
$sql = "SELECT DISTINCT MONTH(date) AS month FROM salary WHERE YEAR(date) = '$year' ORDER BY month";
$result = mysqli_query($conn, $sql);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = array("month" => $row["month"]);
}
mysqli_close($conn);
echo json_encode($data);
?>
```
getSalary.php
```
<?php
require_once("dbconnect.php");
$year = $_GET["year"];
$month = $_GET["month"];
$sql = "SELECT name, id, salary, date FROM salary WHERE YEAR(date)='$year' AND MONTH(date)='$month'";
$result = mysqli_query($conn, $sql);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
mysqli_close($conn);
echo json_encode($data);
?>
```
其中,dbconnect.php是连接数据库的文件,需要根据实际情况进行修改。
阅读全文