jQuery练习员工管理-CFANZ编程社区

jQuery练习：员工管理

介绍

在现代的Web开发中，使用jQuery库可以方便地操作HTML元素和处理事件。本文将介绍如何利用jQuery创建一个简单的员工管理系统，并展示如何使用jQuery来处理常见的操作，如添加、删除和搜索员工。

准备工作

首先，确保在你的项目中引入了jQuery库。你可以通过在HTML页面的<head>标签中添加以下代码来引入jQuery：

<script src="

创建员工管理系统

HTML结构

首先，我们需要创建一个基本的HTML结构来承载员工管理系统。在一个<div>容器中，我们将包含一个表单用于添加新的员工，一个文本框用于搜索员工，以及一个显示员工列表的表格。以下是HTML代码示例：

<div id="employee-management">
  <h2>员工管理系统</h2>
  
  <form id="add-employee-form">
    <input type="text" id="employee-name" placeholder="姓名" />
    <input type="text" id="employee-position" placeholder="职位" />
    <button type="submit">添加员工</button>
  </form>
  
  <input type="text" id="search-employee" placeholder="搜索员工" />
  
  <table id="employee-list">
    <thead>
      <tr>
        <th>姓名</th>
        <th>职位</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 员工数据将在这里动态生成 -->
    </tbody>
  </table>
</div>

添加员工

使用jQuery，我们可以通过监听表单的提交事件来添加新的员工。以下是一个添加员工的jQuery代码示例：

$(document).ready(function() {
  // 添加员工
  $("#add-employee-form").submit(function(event) {
    event.preventDefault(); // 阻止默认的表单提交行为
    
    // 获取输入的员工姓名和职位
    var name = $("#employee-name").val();
    var position = $("#employee-position").val();
    
    // 创建一个新的员工行
    var newRow = $("<tr>");
    newRow.append($("<td>").text(name));
    newRow.append($("<td>").text(position));
    
    // 添加删除按钮
    var deleteButton = $("<button>").text("删除").addClass("delete-button");
    newRow.append($("<td>").append(deleteButton));
    
    // 将新的员工行添加到表格中
    $("#employee-list tbody").append(newRow);
    
    // 清空输入框
    $("#employee-name").val("");
    $("#employee-position").val("");
  });
});

删除员工

我们还可以使用jQuery来删除员工。通过监听删除按钮的点击事件，我们可以找到要删除的员工行并将其从表格中移除。以下是一个删除员工的jQuery代码示例：

$(document).ready(function() {
  // 删除员工
  $(document).on("click", ".delete-button", function() {
    $(this).closest("tr").remove();
  });
});

搜索员工

通过使用jQuery的filter()方法，我们可以实现搜索功能。以下是一个搜索员工的jQuery代码示例：

$(document).ready(function() {
  // 搜索员工
  $("#search-employee").on("keyup", function() {
    var searchValue = $(this).val().toLowerCase();
    
    $("#employee-list tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(searchValue) > -1)
    });
  });
});