温馨提示：这篇文章已超过287天没有更新，请注意相关的内容是否还可用！
Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发人员快速构建美观且响应式的网页。其中之一是表格组件，可以在网页中展示数据。通过使用Ajax技术，我们可以实现在不刷新整个页面的情况下，对表格进行增加和修改操作。
我们需要在页面中引入Bootstrap和jQuery库的相关文件。然后，我们可以使用Bootstrap提供的表格样式来创建一个基本的表格。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</head>
<body>
<table class="711b-869e-ccf1-49ab table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
<td>
<button class="869e-ccf1-49ab-2b51 btn btn-primary edit-btn">Edit</button>
<button class="ccf1-49ab-2b51-3864 btn btn-danger delete-btn">Delete</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
<td>
<button class="49ab-2b51-3864-cc45 btn btn-primary edit-btn">Edit</button>
<button class="2b51-3864-cc45-4de0 btn btn-danger delete-btn">Delete</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
上述代码中，我们使用了Bootstrap提供的`table`类来创建一个表格，并使用`thead`和`tbody`元素来定义表格的表头和内容部分。每一行数据都使用`tr`元素表示，每个单元格使用`td`元素表示。我们还在最后一列添加了编辑和删除按钮。
接下来，我们可以通过Ajax来实现对表格的增加和修改操作。示例代码如下：
$(document).ready(function() {
// 添加按钮点击事件
$('#add-btn').click(function() {
var id = $('#id-input').val();
var name = $('#name-input').val();
var age = $('#age-input').val();
// 发送POST请求，将数据添加到服务器端
$.ajax({
url: '/add',
method: 'POST',
data: {
id: id,
name: name,
age: age
},
success: function(response) {
// 根据服务器返回的结果更新表格
var newRow = '<tr><td>' + id + '</td><td>' + name + '</td><td>' + age + '</td><td><button class="cc45-4de0-5a79-3107 btn btn-primary edit-btn">Edit</button><button class="4de0-5a79-3107-b911 btn btn-danger delete-btn">Delete</button></td></tr>';
$('table tbody').append(newRow);
}
});
});
// 编辑按钮点击事件
$('.edit-btn').click(function() {
var row = $(this).closest('tr');
var id = row.find('td:nth-child(1)').text();
var name = row.find('td:nth-child(2)').text();
var age = row.find('td:nth-child(3)').text();
// 弹出编辑框，显示原有数据
$('#edit-id-input').val(id);
$('#edit-name-input').val(name);
$('#edit-age-input').val(age);
$('#edit-modal').modal('show');
});
// 修改按钮点击事件
$('#edit-confirm-btn').click(function() {
var id = $('#edit-id-input').val();
var name = $('#edit-name-input').val();
var age = $('#edit-age-input').val();
// 发送POST请求，将修改后的数据更新到服务器端
$.ajax({
url: '/edit',
method: 'POST',
data: {
id: id,
name: name,
age: age
},
success: function(response) {
// 根据服务器返回的结果更新表格
var row = $('table tbody').find('td:contains("' + id + '")').closest('tr');
row.find('td:nth-child(2)').text(name);
row.find('td:nth-child(3)').text(age);
$('#edit-modal').modal('hide');
}
});
});
});
上述代码中，我们首先为添加按钮绑定了点击事件，当点击添加按钮时，获取输入框中的数据，并通过Ajax发送POST请求将数据添加到服务器端。在成功回调函数中，根据服务器返回的结果，使用jQuery动态创建一行新的数据，并添加到表格的最后。
然后，我们为编辑按钮绑定了点击事件，当点击编辑按钮时，获取该行数据的ID、Name和Age，并显示在编辑框中。为编辑确认按钮绑定了点击事件，当点击确认按钮时，获取编辑框中的数据，并通过Ajax发送POST请求将修改后的数据更新到服务器端。在成功回调函数中，根据服务器返回的结果，找到对应的行，并更新该行的Name和Age。
