正文

如何轻松玩转jQuery，轻松实现表单的增删改查功能，一步到位掌握技巧！

/0 浏览量
0517

在Web开发中，表单的增删改查（CRUD）功能是必不可少的。而jQuery作为一款强大的JavaScript库，可以帮助我们轻松实现这一功能。本文将带你一步步了解如何使用jQuery实现表单的增删改查，让你轻松玩转jQuery！

一、了解jQuery

jQuery是一个快速、小型且功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax操作，使JavaScript编程更加简单。

二、准备工作

在开始之前，请确保你的项目中已经引入了jQuery库。可以通过以下代码引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

三、实现表单的增删改查

以下是一个简单的示例，展示如何使用jQuery实现表单的增删改查功能。

1. 创建表单

首先，我们需要创建一个表单，包含姓名和年龄两个字段。

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <label for="age">年龄：</label>
  <input type="text" id="age" name="age">
  <button type="button" id="addBtn">添加</button>
</form>
<div id="formList"></div>

2. 添加表单

点击“添加”按钮后，使用jQuery添加一个新的表单。

$(document).on('click', '#addBtn', function() {
  var name = $('#name').val();
  var age = $('#age').val();
  var html = `
    <form class="formItem">
      <label>${name}：</label>
      <input type="text" value="${age}" disabled>
      <button type="button" class="editBtn">编辑</button>
      <button type="button" class="deleteBtn">删除</button>
    </form>
  `;
  $('#formList').append(html);
});

3. 编辑表单

点击“编辑”按钮后，将禁用输入框，并允许用户修改数据。

$(document).on('click', '.editBtn', function() {
  var $formItem = $(this).closest('.formItem');
  $formItem.find('input').prop('disabled', false);
  $(this).text('保存').off('click').on('click', function() {
    var age = $formItem.find('input').val();
    $formItem.find('input').val(age).prop('disabled', true);
    $(this).text('编辑').off('click').on('click', function() {
      $formItem.find('input').prop('disabled', false);
      $(this).text('保存').off('click').on('click', function() {
        var age = $formItem.find('input').val();
        $formItem.find('input').val(age).prop('disabled', true);
      });
    });
  });
});

4. 删除表单

点击“删除”按钮后，删除对应的表单。

$(document).on('click', '.deleteBtn', function() {
  $(this).closest('.formItem').remove();
});

四、总结

通过以上步骤，我们使用jQuery实现了表单的增删改查功能。这个示例只是一个简单的开始，你可以根据自己的需求进行扩展和优化。希望这篇文章能帮助你轻松玩转jQuery，实现更多有趣的功能！

-- 展开阅读全文 --