正文

学会用JavaScript轻松实现Bootstrap表格动态操作：增删改查一步到位

/0 浏览量
0514

在Web开发中，表格是展示数据的一种常见方式。Bootstrap是一个流行的前端框架，它提供了丰富的组件来帮助我们快速构建响应式网页。本文将介绍如何使用JavaScript结合Bootstrap来实现表格的增删改查（CRUD）操作，让您的表格动态管理变得更加简单。

一、准备工作

在开始之前，请确保您的项目中已经引入了Bootstrap CSS和JavaScript文件。以下是Bootstrap的CDN链接：

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

二、创建表格

首先，我们需要创建一个基本的Bootstrap表格。以下是一个简单的示例：

<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据将在这里动态添加 -->
  </tbody>
</table>

三、添加数据

为了添加数据，我们需要编写一个JavaScript函数。以下是一个示例：

function addData(id, name, age) {
  var table = document.querySelector('.table tbody');
  var newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td>${id}</td>
    <td>${name}</td>
    <td>${age}</td>
    <td>
      <button class="btn btn-primary btn-sm edit" data-id="${id}">编辑</button>
      <button class="btn btn-danger btn-sm delete" data-id="${id}">删除</button>
    </td>
  `;
  table.appendChild(newRow);
}

这个函数接受三个参数：id、name和age，用于创建新的表格行。每行包含一个编辑按钮和一个删除按钮。

四、编辑数据

编辑数据需要先获取当前行的数据，然后将其显示在表单中。以下是一个示例：

function editData(id) {
  var row = document.querySelector(`tr[data-id="${id}"]`);
  var name = row.querySelector('td:nth-child(2)').textContent;
  var age = row.querySelector('td:nth-child(3)').textContent;

  // 创建一个表单用于编辑数据
  var form = document.createElement('form');
  form.innerHTML = `
    <div class="mb-3">
      <label for="name" class="form-label">姓名</label>
      <input type="text" class="form-control" id="name" value="${name}">
    </div>
    <div class="mb-3">
      <label for="age" class="form-label">年龄</label>
      <input type="number" class="form-control" id="age" value="${age}">
    </div>
    <button type="button" class="btn btn-primary" onclick="updateData(${id})">保存</button>
  `;
  row.innerHTML = ''; // 清空当前行内容
  row.appendChild(form); // 添加表单
}

这个函数接受一个参数id，用于获取当前行的数据。然后创建一个表单，并将数据填充到表单中。

五、更新数据

更新数据需要将表单中的数据提交到服务器，然后刷新表格。以下是一个示例：

function updateData(id) {
  var name = document.querySelector('#name').value;
  var age = document.querySelector('#age').value;

  // 这里可以添加代码将数据提交到服务器
  // ...

  // 更新表格数据
  var row = document.querySelector(`tr[data-id="${id}"]`);
  row.querySelector('td:nth-child(2)').textContent = name;
  row.querySelector('td:nth-child(3)').textContent = age;

  // 删除表单
  var form = row.querySelector('form');
  row.innerHTML = form.outerHTML;
}

这个函数接受一个参数id，用于获取当前行的数据。然后更新表格数据，并删除表单。

六、删除数据

删除数据需要将当前行从表格中移除。以下是一个示例：

function deleteData(id) {
  var row = document.querySelector(`tr[data-id="${id}"]`);
  row.parentNode.removeChild(row);
}

这个函数接受一个参数id，用于获取当前行，并将其从表格中移除。

七、总结

通过以上步骤，您可以使用JavaScript结合Bootstrap轻松实现表格的增删改查操作。在实际项目中，您可能需要将数据提交到服务器，并处理各种异常情况。但基本的思路和方法是相同的。希望本文能对您有所帮助！

-- 展开阅读全文 --