php和ajax怎么实现可编辑表格

PHPz 原创: 2023-04-21 10:15:16 257浏览

前言

表格是网页中常用的展示数据的方式，而有时我们需要让用户能够通过表格编辑数据，就需要用到可编辑表格。php作为一种服务器端脚本语言，可以对表格进行操作，并且与ajax搭配使用，可以实现异步更新数据，不必重新加载整个网页。在这篇文章中，我们将介绍如何用php和ajax实现可编辑表格。

实现步骤

创建数据库和数据表

首先，在mysql数据库中创建一个名为"editable_table"的数据库，然后创建一个名为"users"的数据表，用于存储用户信息。表的结构如下：

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `phone` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

创建php文件

创建一个名为"table.php"的php文件，用于从数据库中读取用户信息，并将其以表格的形式展示在网页上。代码如下：

<?php
  // 连接数据库
  $conn = mysqli_connect('localhost', 'root', 'password', 'editable_table');
  if (!$conn) {
    die('连接数据库失败: ' . mysqli_connect_error());
  }

  // 查询数据库，获取用户信息
  $sql = "SELECT * FROM users";
  $result = mysqli_query($conn, $sql);

  // 输出表格
  echo "<table><thead><tr><th>ID</th><th>姓名</th><th>邮箱</th><th>电话</th></tr></thead><tbody>";
  while ($row = mysqli_fetch_assoc($result)) {
    echo "<tr><td>" . $row['id'] . "</td><td>" . $row['name'] . "</td><td>" . $row['email'] . "</td><td>" . $row['phone'] . "</td></tr>";
  }
  echo "</tbody></table>";

  // 关闭数据库连接
  mysqli_close($conn);
?>

添加可编辑功能

现在我们已经可以在网页中展示用户信息了，但我们希望用户能够通过表格编辑数据。为了实现这个功能，我们需要添加一些javascript代码。

首先，我们需要添加一个"contenteditable"属性，用于将表格单元格变成可编辑状态。此外，我们还需要添加一个事件监听器，用于当单元格中的内容被修改时，将修改的数据发送到服务器端。

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>可编辑表格</title>
</head>
<body>
  <div id="table-container"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // 读取数据表并将其展示在网页上
    function loadTable() {
      $.ajax({
        url: 'table.php',
        type: 'GET',
        success: function(result) {
          $('#table-container').html(result);
        }
      });
    }

    // 点击单元格时，将它设为可编辑状态
    $(document).on('click', 'td[contenteditable=false]', function() {
      $(this).attr('contenteditable', true);
      $(this).addClass('editable-cell');
      $(this).focus();
    });

    // 当修改单元格中的内容时，将修改的数据发送到服务器端
    $(document).on('blur', 'td[contenteditable=true]', function() {
      var row = $(this).parent();
      var id = row.children().eq(0).text();
      var name = row.children().eq(1).text();
      var email = row.children().eq(2).text();
      var phone = row.children().eq(3).text();

      $.ajax({
        url: 'update_table.php',
        type: 'POST',
        data: { id: id, name: name, email: email, phone: phone },
        success: function(result) {
          loadTable();
        }
      });

      $(this).attr('contenteditable', false);
      $(this).removeClass('editable-cell');
    });

    // 加载数据表
    $(document).ready(function() {
      loadTable();
    });
  </script>
  <style>
    .editable-cell {
      background-color: #fff2cc;
    }
  </style>
</body>
</html>

编写更新数据的php文件

最后，我们需要编写一个名为"update_table.php"的php文件，用于将新的数据更新到数据库中。代码如下：

<?php
  // 连接数据库
  $conn = mysqli_connect('localhost', 'root', 'password', 'editable_table');
  if (!$conn) {
    die('连接数据库失败: ' . mysqli_connect_error());
  }

  // 获取POST请求中的参数
  $id = $_POST['id'];
  $name = $_POST['name'];
  $email = $_POST['email'];
  $phone = $_POST['phone'];

  // 更新数据库中的数据
  $sql = "UPDATE users SET name='$name', email='$email', phone='$phone' WHERE id='$id'";
  $result = mysqli_query($conn, $sql);

  // 输出结果
  if ($result) {
    echo "修改成功";
  } else {
    echo "修改失败";
  }

  // 关闭数据库连接
  mysqli_close($conn);
?>

至此，我们已经完成了php和ajax实现可编辑表格的所有步骤，我们刷新网页，便能实现可编辑表格的相关功能。

总结

本文中，我们介绍了如何用php和ajax实现可编辑表格。通过使用"contenteditable"属性和事件监听器，我们可以让表格单元格变成可编辑状态，并且通过ajax将修改的数据上传到服务器端进行更新。这样，用户就可以方便地通过网页编辑和保存数据了。

以上就是php和ajax怎么实现可编辑表格的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：如何更改php版本下一条：如何为单个php设置密码