bootstrap表格增删

Bootstrap表格增删是指在Bootstrap框架中，通过相关的代码实现表格数据的增加和删除操作。具体实现方法如下：

1. 表格数据的增加

要实现表格数据的增加，我们需要在表格中添加一个“添加”按钮，当用户点击该按钮时，弹出一个对话框，用户可以在对话框中填写新增数据的相关信息，点击“确定”按钮后，将新增的数据添加到表格中。

HTML代码：

<button class="btn btn-primary" data-toggle="modal" data-target="#addModal">添加</button>

<!-- 添加对话框 -->
<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>
          <div class="form-group">
            <label for="gender">性别</label>
            <select class="form-control" id="gender">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </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>

JavaScript代码：

// 点击“添加”按钮，弹出对话框
$('#addModal').on('show.bs.modal', function () {
  // 清空表单数据
  $('#name').val('');
  $('#age').val('');
  $('#gender').val('男');
});

// 点击“确定”按钮，添加数据到表格中
$('#addBtn').click(function() {
  // 获取表单数据
  var name = $('#name').val();
  var age = $('#age').val();
  var gender = $('#gender').val();
  // 新增一行数据到表格中
  $('#myTable').append('<tr><td>' + name + '</td><td>' + age + '</td><td>' + gender + '</td><td><button class="btn btn-danger deleteBtn">删除</button></td></tr>');
  // 隐藏对话框
  $('#addModal').modal('hide');
});

2. 表格数据的删除

要实现表格数据的删除，我们需要在每一行数据的最后一列添加一个“删除”按钮，当用户点击该按钮时，删除该行数据。

HTML代码：

<table class="table table-striped" id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
      <td><button class="btn btn-danger deleteBtn">删除</button></td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
      <td><button class="btn btn-danger deleteBtn">删除</button></td>
    </tr>
  </tbody>
</table>

JavaScript代码：

// 点击“删除”按钮，删除当前行数据
$('#myTable').on('click', '.deleteBtn', function() {
  if (confirm('确定要删除该行数据吗？')) {
    $(this).parents('tr').remove();
  }
});

以上就是Bootstrap表格增删的实现方法。