BootStrap实现带有增删改查功能的表格(DEMO详解)

在Web开发中，表格是一个非常常见的组件。为了提高表格的交互性和用户体验，我们通常会在表格中添加增删改查等功能。本文将介绍如何使用BootStrap实现带有增删改查功能的表格。

环境准备

在使用BootStrap实现带有增删改查功能的表格前，需要先了解以下知识：

BootStrap：一个流行的前端框架，提供了丰富的UI组件和交互效果。
jQuery：一个流行的JavaScript库，提供了方便的DOM操作和事件处理功能。
AJAX：一种异步通信技术，可以在不刷新页面的情况下向服务器发送请求和接收响应。

实现步骤

以下是使用BootStrap实现带有增删改查功能的表格的步骤：

步骤1：创建HTML页面

首先，我们需要创建一个HTML页面，并引入BootStrap和jQuery库。在页面中，我们需要添加一个表格和一些按钮，用于实现增删改查等功能。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BootStrap实现带有增删改查功能的表格</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>BootStrap实现带有增删改查功能的表格</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>20</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm">编辑</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm">编辑</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addModal">添加</button>
    </div>
</body>
</html>

在上面的示例中，我们使用了BootStrap提供的表格组件，并添加了编辑和删除按钮。我们还添加了一个添加按钮，用于打开添加模态框。

步骤2：创建添加模态框

接下来，我们需要创建一个添加模态框，用于添加新的数据。以下是示例代码：

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addModalLabel">添加数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" placeholder="请输入年龄">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addBtn">保存</button>
            </div>
        </div>
    </div>
</div>

在上面的示例中，我们使用了BootStrap提供的模态框组件，并添加了一个表单。我们还添加了一个保存按钮，用于保存新的数据。

步骤3：创建编辑模态框

接下来，我们需要创建一个编辑模态框，用于编辑已有的数据。以下是示例代码：

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">编辑数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="editName">姓名</label>
                        <input type="text" class="form-control" id="editName" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="editAge">年龄</label>
                        <input type="text" class="form-control" id="editAge" placeholder="请输入年龄">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

在上面的示例中，我们同样使用了BootStrap提供的模态框组件，并添加了一个表单。我们还添加了一个保存按钮，用于保存编辑后的数据。

步骤4：创建删除模态框

接下来，我们需要创建一个删除模态框，用于删除已有的数据。以下是示例代码：

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">删除数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>确定要删除该数据吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="deleteBtn">删除</button>
            </div>
        </div>
    </div>
</div>

在上面的示例中，我们同样使用了BootStrap提供的模态框组件，并添加了一个提示信息和一个删除按钮。

步骤5：编写JavaScript代码

最后，我们需要编写JavaScript代码，实现增删改查等功能。以下是示例代码：

$(function () {
    // 添加数据
    $('#addBtn').click(function () {
        var name = $('#name').val();
        var age = $('#age').val();
        $.ajax({
            url: '/add',
            type: 'POST',
            data: { name: name, age: age },
            success: function (data) {
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.message);
                }
            }
        });
    });

    // 编辑数据
    $('.table').on('click', '.btn-primary', function () {
        var id = $(this).parents('tr').find('td:first').text();
        var name = $(this).parents('tr').find('td:eq(1)').text();
        var age = $(this).parents('tr').find('td:eq(2)').text();
        $('#editModal').modal('show');
        $('#editName').val(name);
        $('#editAge').val(age);
        $('#saveBtn').click(function () {
            var newName = $('#editName').val();
            var newAge = $('#editAge').val();
            $.ajax({
                url: '/edit',
                type: 'POST',
                data: { id: id, name: newName, age: newAge },
                success: function (data) {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert(data.message);
                    }
                }
            });
        });
    });

    // 删除数据
    $('.table').on('click', '.btn-danger', function () {
        var id = $(this).parents('tr').find('td:first').text();
        $('#deleteModal').modal('show');
        $('#deleteBtn').click(function () {
            $.ajax({
                url: '/delete',
                type: 'POST',
                data: { id: id },
                success: function (data) {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert(data.message);
                    }
                }
            });
        });
    });
});

在上面的示例中，我们使用了jQuery库和AJAX技术，实现了添加、编辑和删除等功能。我们使用了on方法来绑定事件，实现了动态绑定。我们还使用了modal方法来打开模态框。

示例1：使用PHP实现增删改查功能

以下是使用PHP实现增删改查功能的示例代码：

```php

true);
} else {
$data = array('success' => false, 'message' => '添加数据失败');
}
mysqli_close($conn);
echo json_encode($data);
exit;
}

// 编辑数据
if ($_POST['id'] && $_POST['name'] && $_POST['age']) {
$id = $_POST['id'];
$name = $_POST['name'];
$age = $_POST['age'];
$conn = mysqli_connect('localhost', 'root', 'password', 'test');
$sql = "UPDATE users SET name='$name', age='$age' WHERE id=$id";
$result = mysqli_query($conn, $sql);
if ($result) {
$data = array('success' => true);
} else {
$data = array('success' => false, 'message' => '编辑数据失败');
}
mysqli_close($conn);
echo json_encode($data);
exit;
}

// 删除数据
if ($_POST['id']) {
$id = $_POST['id'];
$conn = mysqli_connect('localhost', 'root', 'password', 'test');
$sql = "DELETE FROM users WHERE id=$id";
$result = mysqli_query($conn, $sql);
if ($result) {
$data = array('success' => true);
} else {
$data = array('success' => false, 'message' => '删除数据失败');
}
mysqli_close($conn);
echo json_encode($data);
exit;
}

// 查询数据
$conn = mysqli_connect('localhost', 'root', 'password', 'test');
$sql = "SELECT * FROM users";
$result = mysqli_query($conn, $sql);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
mysqli_close($conn);
?>

BootStrap实现带有增删改查功能的表格

BootStrap实现带有增删改查功能的表格

ID	姓名	年龄	操作