用jquery写一个员工信息管理系统UI,包括ID、name、gender、address、phone、photo、date的增删改查功能
时间: 2023-09-27 15:10:50 浏览: 60
为了实现员工信息管理系统的增删改查功能,你可以在上面的基础上进行扩展。下面是一个示例代码,其中包含了增加、删除、编辑和查询员工信息的功能:
```javascript
$(document).ready(function() {
var employees = []; // 存储员工信息的数组
var currentIndex = -1; // 当前编辑的员工索引
// 提交表单时的事件处理
$('#employee-form').submit(function(event) {
event.preventDefault(); // 阻止表单提交的默认行为
// 获取表单数据
var id = $('#id').val();
var name = $('#name').val();
var gender = $('#gender').val();
var address = $('#address').val();
var phone = $('#phone').val();
var photo = $('#photo').val();
var date = $('#date').val();
// 根据编辑状态执行不同操作
if (currentIndex === -1) {
// 添加新员工
var newEmployee = {
id: id,
name: name,
gender: gender,
address: address,
phone: phone,
photo: photo,
date: date
};
employees.push(newEmployee); // 添加到数组中
// 创建员工信息的HTML
var employeeHtml = '<div class="employee">' +
'<h3>' + name + '</h3>' +
'<p>ID: ' + id + '</p>' +
'<p>性别: ' + gender + '</p>' +
'<p>地址: ' + address + '</p>' +
'<p>电话: ' + phone + '</p>' +
'<p>日期: ' + date + '</p>' +
'<button class="edit-btn">编辑</button>' +
'<button class="delete-btn">删除</button>' +
'</div>';
// 将员工信息添加到列表中
$('#employee-list').append(employeeHtml);
} else {
// 更新编辑的员工信息
var editedEmployee = employees[currentIndex];
editedEmployee.id = id;
editedEmployee.name = name;
editedEmployee.gender = gender;
editedEmployee.address = address;
editedEmployee.phone = phone;
editedEmployee.photo = photo;
editedEmployee.date = date;
// 更新对应员工信息的HTML
var editedEmployeeHtml = '<h3>' + name + '</h3>' +
'<p>ID: ' + id + '</p>' +
'<p>性别: ' + gender + '</p>' +
'<p>地址: ' + address + '</p>' +
'<p>电话: ' + phone + '</p>' +
'<p>日期: ' + date + '</p>' +
'<button class="edit-btn">编辑</button>' +
'<button class="delete-btn">删除</button>';
$('#employee-list .employee').eq(currentIndex).html(editedEmployeeHtml);
currentIndex = -1; // 重置编辑状态
}
// 清空表单数据
$('#id').val('');
$('#name').val('');
$('#gender').val('male');
$('#address').val('');
$('#phone').val('');
$('#photo').val('');
$('#date').val('');
});
// 编辑按钮点击事件处理
$(document).on('click', '.edit-btn', function() {
currentIndex = $(this).closest('.employee').index(); // 获取当前员工索引
// 获取对应员工的信息
var employee = employees[currentIndex];
$('#id').val(employee.id);
$('#name').val(employee.name);
$('#gender').val(employee.gender);
$('#address').val(employee.address);
$('#phone').val(employee.phone);
$('#photo').val(employee.photo);
$('#date').val(employee.date);
});
// 删除按钮点击事件处理
$(document).on('click', '.delete-btn', function() {
var index = $(this).closest('.employee').index(); // 获取要删除的员工索引
// 从数组和界面中删除员工信息
employees.splice(index, 1);
$(this).closest('.employee').remove();
});
// 查询按钮点击事件处理
$('#search-btn').click(function() {
var keyword = $('#search-input').val().toLowerCase();
// 遍历员工数组,根据关键字筛选匹配项并显示
$('#employee-list .employee').each(function() {
var name = $(this).find('h3').text().toLowerCase();
if (name.includes(keyword)) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
```
这个示例代码中添加了编辑按钮的点击事件处理,当点击编辑按钮时,会将对应员工的信息填充到表单中,允许修改。另外,还添加了删除按钮的点击事件处理,当点击删除按钮时,会从数组和界面中删除对应的员工信息。
此外,还增加了一个查询功能,通过输入关键字来筛选匹配的员工信息并显示。
请确保将上述代码添加到之前的代码中,并在HTML文件中添加一个输入框和查询按钮。例如:
```html
<!-- 在form标签之后添加查询功能的HTML -->
<input type="text" id="search-input" placeholder="输入关键字">
<button id="search-btn">查询</button>
```
这样,你就可以使用jQuery构建一个具有增删改查功能的员工信息管理系统的用户界面了。记得根据自己的需求进行进一步的修改和优化。