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">×</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">×</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">×</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实现带有增删改查功能的表格
ID | 姓名 | 年龄 | 操作 |
---|---|---|---|
|