BootStrap 可编辑表Table格

让我来详细讲解一下怎样使用 BootStrap 实现可编辑表格。

什么是 BootStrap 可编辑表格

BootStrap 可编辑表格是一种可以通过鼠标单击或双击来进行编辑的表格。用户可以在表格中直接修改信息，在修改后，表格中的数据可以实时更新。这种可编辑表格在网站开发中非常常见，可以用于数据的展示和修改。

实现方法

实现 BootStrap 可编辑表格需要引用 BootStrap 框架，同时需要编写一些 JavaScript 代码。下面是实现可编辑表格的完整步骤：

步骤1：引用 BootStrap 框架

在头部区域添加如下代码即可引用 BootStrap 框架：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

步骤2：创建表格

标准的 HTML 表格可以在 Bootstrap 网站中找到，或者自己编写。首先需要创建一个 <table> 标签，然后在其中添加 <thead>、<tbody> 和 <tfoot> 等子标签。渲染完成后，表格的 DOM 结构如下：

<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>18888888888</td>
      <td><button class="btn btn-default">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>18999999999</td>
      <td><button class="btn btn-default">删除</button></td>
    </tr>
    ...
  </tbody>
</table>

步骤3：添加可编辑功能

为了实现表格的可编辑功能，我们需要添加一些 JavaScript 代码。在可以编辑的单元格上添加两个事件，一个是 click 事件，用于实现单击进入编辑状态，另一个是 blur 事件，用于保存修改后的内容。

$(document).ready(function() {
  $("table td").click(function() {
    var content = $(this).text();
    $(this).html("<input type='text' value='" + content + "'/>");
    $(this).find("input").focus().blur(function() {
      var editedContent = $(this).val();
      $(this).parent().text(editedContent);
    });
  });
});

上述代码中，$("table td").click() 表示选择所有表格单元格，$(this).text() 获取单元格中的文本，并用 <input> 标签替换原有的文本内容。在 <input> 标签的 blur 事件中，将修改后的内容更新到单元格中。

步骤4：添加删除功能

我们添加按钮元素来删除整个行。这个表格中加一个名为“删除按钮”的按钮列，然后为这个按钮列中的每一行添加一个“删除”按钮。当用户单击删除按钮时，将删除整行。

$("table button").click(function() {
  $(this).parent().parent().remove();
});

上述代码中，$("table button").click() 表示选择表格中所有的按钮元素，并为它们添加 click 事件。当用户单击按钮时，$(this).parent().parent().remove() 将会删除整个表格行。

示例说明1

下面是一个具有可编辑和删除表格行功能的实例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>可编辑表格</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <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>18888888888</td>
        <td><button class="btn btn-default">删除</button></td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>18999999999</td>
        <td><button class="btn btn-default">删除</button></td>
      </tr>
    </tbody>
  </table>
  <script>
    $(document).ready(function() {
      $("table td").click(function() {
        var content = $(this).text();
        $(this).html("<input type='text' value='" + content + "'/>");
        $(this).find("input").focus().blur(function() {
          var editedContent = $(this).val();
          $(this).parent().text(editedContent);
        });
      });

      $("table button").click(function() {
        $(this).parent().parent().remove();
      });
    });
  </script>
</body>
</html>

示例说明2

下面是一个具有可编辑和添加表格行功能的实例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>可编辑表格</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container" style="margin-top:50px;">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>电话</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="table_body">
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>18888888888</td>
          <td><button class="btn btn-default">删除</button></td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>18999999999</td>
          <td><button class="btn btn-default">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4" class="text-center"><button class="btn btn-primary" id="btn_add">添加新记录</button></td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script>
    $(document).ready(function() {
      $("#btn_add").click(function() {
        var rowCount = $("#table_body tr").length + 1;
        var html = "<tr><td>" + rowCount + "</td><td></td><td></td><td><button class='btn btn-default'>删除</button></td></tr>";
        $("#table_body").append(html);
      });

      $("table td").click(function() {
        var content = $(this).text();
        $(this).html("<input type='text' value='" + content + "'/>");
        $(this).find("input").focus().blur(function() {
          var editedContent = $(this).val();
          $(this).parent().text(editedContent);
        });
      });

      $("table button").click(function() {
        $(this).parent().parent().remove();
      });
    });
  </script>
</body>
</html>

通过以上两个示例，您可以清楚地了解如何使用 BootStrap 实现可编辑的表格。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：BootStrap 可编辑表Table格 - Python技术站