HTML+JavaScript+CSS的人员信息管理系统，2024年最新蚂蚁金服面经

由于提问中包含了大量的技术栈（HTML、JavaScript、CSS），我们可以创建一个简单的人员信息管理系统作为示例。以下是一个基础的人员信息添加和显示的HTML、JavaScript和CSS代码。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>员工信息管理系统</title>
<style>
    body { font-family: Arial, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; }
    th { background-color: #f2f2f2; }
</style>
</head>
<body>
 
<h2>员工信息管理系统</h2>
 
<table>
    <tr>
        <th>姓名</th>
        <th>职位</th>
        <th>入职日期</th>
        <th>操作</th>
    </tr>
    <tbody id="employeeTable">
        <!-- 这里将显示员工信息行 -->
    </tbody>
</table>
 
<h2>添加新员工</h2>
<form id="employeeForm">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="position">职位:</label>
    <input type="text" id="position" name="position"><br><br>
    <label for="joinDate">入职日期:</label>
    <input type="date" id="joinDate" name="joinDate"><br><br>
    <input type="button" value="添加员工" onclick="addEmployee()">
</form>
 
<script>
    // 模拟员工数据
    let employees = [];
 
    // 添加员工函数
    function addEmployee() {
        let name = document.getElementById('name').value;
        let position = document.getElementById('position').value;
        let joinDate = document.getElementById('joinDate').value;
 
        let newEmployee = {
            name: name,
            position: position,
            joinDate: joinDate
        };
 
        employees.push(newEmployee);
 
        // 清空表单
        document.getElementById('employeeForm').reset();
 
        // 更新员工列表
        showEmployees(employees);
    }
 
    // 显示员工列表函数
    function showEmployees(employees) {
        let table = document.getElementById('employeeTable');
        table.innerHTML = ''; // 清空之前的内容
 
        for (let employee of employees) {
            let row = `<tr>
                           <td>${employee.name}</td>
                           <td>${employee.position}</td>
                           <td>${employee.joinDate}</td>
                           <td><button onclick="editEmployee(${employee.name})">编辑</button> <button onclick="deleteEmployee(${employee.name})">删除</button></td>
                       </tr>`;
            table.insertAdjacentHTML('beforeend', row);
        }
    }
 
    // 编辑员工函数

HTML+JavaScript+CSS的人员信息管理系统，2024年最新蚂蚁金服面经

评论已关闭

推荐阅读