phpとajaxを使用して編集可能なテーブルを実装する方法-PHPの問題-php.cn

ホームページ

バックエンド開発

PHPの問題

phpとajaxを使用して編集可能なテーブルを実装する方法

Apr 21, 2023 am 10:00 AM

はじめに

テーブルは、Web ページにデータを表示するためによく使用される方法ですが、場合によっては、ユーザーがテーブルを介してデータを編集できるようにする必要があるため、編集可能なテーブルを使用する必要があります。サーバーサイドのスクリプト言語として、php はテーブルを操作でき、ajax と併用すると、Web ページ全体をリロードせずにデータを非同期に更新できます。この記事では、phpとajaxを使って編集可能なテーブルを実装する方法を紹介します。

実装手順

データベースとデータテーブルの作成

まず、mysql データベースに「editable_table」という名前のデータベースを作成し、次に A 「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 ファイルを作成します。 Webページ上に表形式で表示します。コードは次のとおりです。

&lt;?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 = &quot;SELECT * FROM users&quot;;
  $result = mysqli_query($conn, $sql);

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

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

ログイン後にコピー

編集可能な関数を追加

これで Web ページにユーザー情報を表示できるようになりましたが、ユーザーが次の方法でデータを編集できるようにしたいと考えています。フォーム。この機能を実現するには、JavaScript コードを追加する必要があります。

まず、「contenteditable」属性を追加して、表のセルを編集可能な状態にする必要があります。さらに、セル内のコンテンツが変更されたときに、変更されたデータをサーバーに送信するためのイベントリスナーを追加する必要もあります。

コードは次のとおりです:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;可编辑表格&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;table-container&quot;&gt;&lt;/div&gt;
  &lt;script src=&quot;https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    // 读取数据表并将其展示在网页上
    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();
    });
  &lt;/script&gt;
  &lt;style&gt;
    .editable-cell {
      background-color: #fff2cc;
    }
  &lt;/style&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

データを更新するための php ファイルを作成します

最後に、「update_table」という名前の php ファイルを作成する必要があります。 .php" 、新しいデータをデータベースに更新するために使用されます。コードは次のとおりです:

&lt;?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 = &quot;UPDATE users SET name=&#39;$name&#39;, email=&#39;$email&#39;, phone=&#39;$phone&#39; WHERE id=&#39;$id&#39;&quot;;
  $result = mysqli_query($conn, $sql);

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

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

ログイン後にコピー

この時点で、php と ajax を使用して編集可能なテーブルを実装するすべての手順が完了しました。Web ページを更新すると、編集可能なテーブルの関連機能を実現できます。

概要

この記事では、php と ajax を使用して編集可能なテーブルを実装する方法を紹介しました。「contenteditable」属性とイベントリスナーを使用すると、テーブルのセルを編集可能にし、変更されたデータをサーバーにアップロードして、ajax 経由で更新できます。このようにして、ユーザーは Web ページを通じてデータを簡単に編集および保存できます。

以上がphpとajaxを使用して編集可能なテーブルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。