获取Bootstrap表数据并删除行的方法可以通过以下步骤实现:
data-id
属性。<table id="myTable" class="table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td><button class="btn btn-danger delete-btn" data-id="1">删除</button></td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td><button class="btn btn-danger delete-btn" data-id="2">删除</button></td>
</tr>
<!-- 其他行... -->
</tbody>
</table>
$(document).ready(function() {
$('.delete-btn').click(function() {
var rowId = $(this).data('id'); // 获取点击按钮的data-id值
$(this).closest('tr').remove(); // 删除按钮所在的行
// 在这里可以进行其他操作,例如向服务器发送请求删除数据库中的对应数据
});
});
$(this).data('id')
获取到对应行的唯一标识符,然后使用$(this).closest('tr')
找到最近的<tr>
元素,并使用remove()
方法将其从DOM中删除。这样,当用户点击删除按钮时,对应的行将会被删除。
注意:以上代码示例中并未涉及具体的后端数据交互和数据库操作,如果需要与后端进行数据交互,你可以使用AJAX技术将删除请求发送到服务器,并在服务器端进行相应的处理。
领取专属 10元无门槛券
手把手带您无忧上云