员工信息管理系统 - 添加、查询、删除员工
<!DOCTYPE html>
<html>
<head>
<title>员工信息管理</title>
<style>
.form-control {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>员工信息管理</h1>
<pre><code><!-- 添加员工表单 -->
<h2>添加员工</h2>
<form id="addForm">
<div>
<label for="name">姓名：</label>
<input type="text" id="name" class="form-control" required>
</div>
<div>
<label for="gender">性别：</label>
<select id="gender" class="form-control" required>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<label for="birthday">出生日期：</label>
<input type="date" id="birthday" class="form-control" required>
</div>
<div>
<label for="address">地址：</label>
<select id="province" class="form-control" required>
<option value="">请选择省</option>
<!-- 省级选项 -->
</select>
<select id="city" class="form-control" required>
<option value="">请选择市</option>
<!-- 市级选项 -->
</select>
<select id="area" class="form-control" required>
<option value="">请选择区</option>
<!-- 区级选项 -->
</select>
<input type="text" id="address" class="form-control" required>
</div>
<div>
<label for="phone">联系电话：</label>
<input type="text" id="phone" class="form-control" required>
</div>
<div>
<button type="submit">添加</button>
</div>
</form>
<!-- 员工列表 -->
<h2>员工列表</h2>
<table id="employeeTable">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>地址</th>
<th>联系电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 员工信息行 -->
</tbody>
</table>
<script>
// 获取省级选项
fetch('pca_provinces.json')
.then(response => response.json())
.then(provinces => {
const provinceSelect = document.getElementById('province');
provinces.forEach(province => {
const option = document.createElement('option');
option.value = province.name;
option.textContent = province.name;
provinceSelect.appendChild(option);
});
});
// 根据选择的省级选项获取市级选项
document.getElementById('province').addEventListener('change', function() {
const provinceName = this.value;
const citySelect = document.getElementById('city');
// 清空已有的市、区级选项
citySelect.innerHTML = '<option value="">请选择市</option>';
document.getElementById('area').innerHTML = '<option value="">请选择区</option>';
if (provinceName) {
fetch('pca_cities.json')
.then(response => response.json())
.then(cities => {
const filteredCities = cities.filter(city => city.provinceName === provinceName);
filteredCities.forEach(city => {
const option = document.createElement('option');
option.value = city.name;
option.textContent = city.name;
citySelect.appendChild(option);
});
});
}
});
// 根据选择的市级选项获取区级选项
document.getElementById('city').addEventListener('change', function() {
const cityName = this.value;
const areaSelect = document.getElementById('area');
// 清空已有的区级选项
areaSelect.innerHTML = '<option value="">请选择区</option>';
if (cityName) {
fetch('pca_areas.json')
.then(response => response.json())
.then(areas => {
const filteredAreas = areas.filter(area => area.cityName === cityName);
filteredAreas.forEach(area => {
const option = document.createElement('option');
option.value = area.name;
option.textContent = area.name;
areaSelect.appendChild(option);
});
});
}
});
// 添加员工
document.getElementById('addForm').addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
const gender = document.getElementById('gender').value;
const birthday = document.getElementById('birthday').value;
const province = document.getElementById('province').value;
const city = document.getElementById('city').value;
const area = document.getElementById('area').value;
const address = document.getElementById('address').value;
const phone = document.getElementById('phone').value;
// 拼接地址
const fullAddress = province + city + area + address;
// 校验年龄
const today = new Date();
const birthDate = new Date(birthday);
const age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
if (age < 18) {
alert('出生年月不得小于18周岁！');
return;
}
// 校验联系电话
const existingPhones = Array.from(document.querySelectorAll('#employeeTable tbody tr td:nth-child(5)')).map(td => td.textContent);
if (existingPhones.includes(phone)) {
alert('联系电话重复！');
return;
}
// 创建员工信息行
const row = document.createElement('tr');
const nameCell = document.createElement('td');
const genderCell = document.createElement('td');
const birthdayCell = document.createElement('td');
const addressCell = document.createElement('td');
const phoneCell = document.createElement('td');
const deleteButtonCell = document.createElement('td');
nameCell.textContent = name;
genderCell.textContent = gender;
birthdayCell.textContent = birthday;
addressCell.textContent = fullAddress;
phoneCell.textContent = phone;
deleteButtonCell.innerHTML = '<button class="deleteButton">删除</button>';
row.appendChild(nameCell);
row.appendChild(genderCell);
row.appendChild(birthdayCell);
row.appendChild(addressCell);
row.appendChild(phoneCell);
row.appendChild(deleteButtonCell);
document.getElementById('employeeTable').getElementsByTagName('tbody')[0].appendChild(row);
// 清空表单
document.getElementById('name').value = '';
document.getElementById('gender').value = '男';
document.getElementById('birthday').value = '';
document.getElementById('province').value = '';
document.getElementById('city').value = '';
document.getElementById('area').value = '';
document.getElementById('address').value = '';
document.getElementById('phone').value = '';
});
// 删除员工
document.getElementById('employeeTable').addEventListener('click', function(event) {
if (event.target.classList.contains('deleteButton')) {
event.target.closest('tr').remove();
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/8ot 著作权归作者所有。请勿转载和采集!