正文

学会Bootstrap3表格动态操作：轻松实现数据增删改查

/0 浏览量
0730

Bootstrap 3 是一个流行的前端框架，它提供了丰富的组件和工具来帮助开发者快速构建响应式网页。表格是网页中常见的一种元素，用于展示和操作数据。在本篇文章中，我们将探讨如何使用Bootstrap 3来实现表格的动态操作，包括数据的增加、删除、修改和查询。

基础表格设置

首先，我们需要创建一个基本的Bootstrap表格。以下是一个简单的HTML表格示例：

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>28</td>
      <td><button class="btn btn-primary btn-xs">编辑</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>29</td>
      <td><button class="btn btn-primary btn-xs">编辑</button></td>
    </tr>
  </tbody>
</table>

在上面的代码中，我们创建了一个包含三列（编号、姓名、年龄）和一个操作按钮的表格。

添加数据

为了实现数据的添加，我们需要创建一个表单来输入新的数据，并将其绑定到表格上。以下是一个添加数据的HTML表单示例：

<form id="dataForm">
  <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="number" class="form-control" id="age" placeholder="请输入年龄">
  </div>
  <button type="button" class="btn btn-primary" onclick="addData()">添加数据</button>
</form>

在 addData() 函数中，我们需要获取表单中的数据，并创建一个新的表格行来显示这些数据。以下是一个可能的JavaScript实现：

function addData() {
  var name = document.getElementById('name').value;
  var age = document.getElementById('age').value;
  var table = document.querySelector('.table');
  var newRow = table.insertRow(-1);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  var cell4 = newRow.insertCell(3);
  cell1.innerHTML = table.rows.length;
  cell2.innerHTML = name;
  cell3.innerHTML = age;
  cell4.innerHTML = '<button class="btn btn-primary btn-xs">编辑</button>';
  document.getElementById('dataForm').reset();
}

删除数据

删除数据可以通过为每个编辑按钮绑定一个事件来实现。以下是一个删除按钮的示例：

<button class="btn btn-danger btn-xs" onclick="deleteRow(this)">删除</button>

在 deleteRow() 函数中，我们需要找到与按钮关联的行，并从表格中删除该行。以下是一个可能的JavaScript实现：

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

修改数据

修改数据与删除数据类似，只需要获取单元格中的数据，并更新表单中的输入值。以下是一个修改按钮的示例：

<button class="btn btn-warning btn-xs" onclick="editRow(this)">编辑</button>

在 editRow() 函数中，我们需要获取单元格中的数据，并将其显示在表单中。以下是一个可能的JavaScript实现：

function editRow(btn) {
  var row = btn.parentNode.parentNode;
  var name = row.cells[1].innerText;
  var age = row.cells[2].innerText;
  document.getElementById('name').value = name;
  document.getElementById('age').value = age;
}

查询数据

查询数据可以通过添加一个搜索框来实现。以下是一个搜索框的示例：

<div class="input-group">
  <input type="text" class="form-control" placeholder="搜索..." id="searchInput">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button" onclick="searchData()">搜索</button>
  </span>
</div>

在 searchData() 函数中，我们需要遍历表格中的每一行，并根据搜索框中的输入值来匹配数据。以下是一个可能的JavaScript实现：

function searchData() {
  var input = document.getElementById('searchInput').value.toLowerCase();
  var table = document.querySelector('.table');
  for (var i = 0; i < table.rows.length; i++) {
    var name = table.rows[i].cells[1].innerText.toLowerCase();
    if (name.includes(input)) {
      table.rows[i].style.display = '';
    } else {
      table.rows[i].style.display = 'none';
    }
  }
}

通过以上步骤，我们就可以使用Bootstrap 3实现表格的动态操作，包括数据的增加、删除、修改和查询。希望这篇文章能帮助你更好地理解和应用Bootstrap 3的表格功能。

-- 展开阅读全文 --