php和ajax怎麼實作可編輯表格

PHPz
發布: 2023-04-21 10:15:16
原創
714 人瀏覽過

前言

表格是網頁中常用的展示數據的方式,而有時我們需要讓使用者能夠透過表格編輯數據,就需要用到可編輯表格。 php作為一種伺服器端腳本語言,可以對錶格進行操作,並且與ajax搭配使用,可以實現異步更新數據,不必重新加載整個網頁。在這篇文章中,我們將介紹如何用php和ajax實作可編輯表格。

實作步驟

  1. 建立資料庫和資料表

#首先,在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;
登入後複製
  1. 建立php檔案

建立一個名為"table.php"的php文件,用於從資料庫中讀取使用者信息,並將其以表格的形式展示在網頁上。程式碼如下:

<?php
  // 连接数据库
  $conn = mysqli_connect(&#39;localhost&#39;, &#39;root&#39;, &#39;password&#39;, &#39;editable_table&#39;);
  if (!$conn) {
    die(&#39;连接数据库失败: &#39; . 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);
?>
登入後複製
  1. 新增可編輯功能

現在我們已經可以在網頁中展示使用者資訊了,但我們希望使用者能夠透過表格編輯資料。為了實現這個功能,我們需要加入一些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>
登入後複製
  1. 編寫更新資料的php檔案

最後,我們需要寫一個名為"update_table.php"的php文件,用於將新的資料更新到資料庫中。程式碼如下:

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

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

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

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

  // 关闭数据库连接
  mysqli_close($conn);
?>
登入後複製

至此,我們已經完成了php和ajax實作可編輯表格的所有步驟,我們刷新網頁,以便實現可編輯表格的相關功能。

總結

本文中,我們介紹如何以php和ajax實作可編輯表格。透過使用"contenteditable"屬性和事件監聽器,我們可以讓表格單元格變成可編輯狀態,並且透過ajax將修改的資料上傳到伺服器端進行更新。這樣,使用者就可以方便地透過網頁編輯和保存資料了。

以上是php和ajax怎麼實作可編輯表格的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!