Bootstrap5 + jQuery列表增删改实现指南

1. 概述

在本文中，我将教导你如何使用Bootstrap5和jQuery来实现列表的增加、删除和修改功能。使用这两个强大的工具，你可以轻松地构建一个响应式的网页应用程序。

2. 准备工作

在开始之前，确保你已经正确引入了Bootstrap5和jQuery。你可以通过以下方式将它们添加到你的项目中：

<!-- 引入Bootstrap5 CSS -->
<link href=" rel="stylesheet">

<!-- 引入jQuery -->
<script src="

<!-- 引入Bootstrap5 JavaScript -->
<script src="

3. 实现步骤

下表总结了实现列表增删改功能的步骤：

步骤 描述
1. 创建HTML结构 创建一个包含表格和表单的HTML结构
2. 绑定事件处理程序 使用jQuery绑定按钮的点击事件和表单的提交事件
3. 添加新项 当表单提交时，获取表单中的输入值，并将其添加到列表中
4. 删除项 点击列表中的删除按钮时，从列表中移除对应的项
5. 修改项 点击列表中的编辑按钮时，将项的值显示在表单中，允许用户进行修改

4. 代码实现

4.1 创建HTML结构

首先，创建一个包含表格和表单的HTML结构。代码如下：

<div class="container">
  列表增删改示例
  <table id="item-list" class="table">
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 列表项将在JavaScript中动态添加 -->
    </tbody>
  </table>
  <form id="add-form">
    <div class="mb-3">
      <label for="name" class="form-label">名称：</label>
      <input type="text" id="name" class="form-control" required>
    </div>
    <button type="submit" class="btn btn-primary">添加</button>
  </form>
</div>

4.2 绑定事件处理程序

接下来，我们使用jQuery来绑定按钮的点击事件和表单的提交事件。代码如下：

$(document).ready(function() {
  // 添加按钮点击事件处理程序
  $('#add-form').submit(function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    var name = $('#name').val(); // 获取输入框的值
    addItem(name); // 调用addItem函数将新项添加到列表中
    $('#name').val(''); // 清空输入框的值
  });

  // 删除按钮点击事件处理程序
  $('#item-list').on('click', '.delete-btn', function() {
    $(this).closest('tr').remove(); // 从DOM中移除所在行
  });

  // 编辑按钮点击事件处理程序
  $('#item-list').on('click', '.edit-btn', function() {
    var name = $(this).closest('tr').find('.name').text(); // 获取项的值
    $('#name').val(name); // 在表单中显示项的值
    $(this).closest('tr').remove(); // 从DOM中移除所在行
  });
});

4.3 添加新项

当表单提交时，我们需要获取输入框的值，并将其添加到列表中。代码如下：

function addItem(name) {
  var newRow = '<tr>' +
    '<td class="id">' + generateUniqueId() + '</td>' +
    '<td class="name">' + name + '</td>' +
    '<td>' +
    '<button type="button" class="btn btn-danger delete-btn">删除</button> ' +
    '<button type="button" class="btn btn-primary edit-btn">编辑</button>' +
    '</td>' +
    '</tr>';
  $('#item-list tbody').append(newRow); // 在列表的tbody中添加新行
}

4.4 删除项

当点击列表中的删除按钮时，我们需要从列表中移