ホームページ バックエンド開発 PHPの問題 phpとajaxを使用して編集可能なテーブルを実装する方法

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

Apr 21, 2023 am 10:00 AM

はじめに

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

実装手順

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

まず、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;
ログイン後にコピー
  1. php ファイルの作成

データベースからユーザー情報を読み取るための「table.php」という名前の php ファイルを作成します。 Webページ上に表形式で表示します。コードは次のとおりです。

<?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);
?>
ログイン後にコピー
  1. 編集可能な関数を追加

これで Web ページにユーザー情報を表示できるようになりましたが、ユーザーが次の方法でデータを編集できるようにしたいと考えています。フォーム。この機能を実現するには、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('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 を使用して編集可能なテーブルを実装するすべての手順が完了しました。Web ページを更新すると、編集可能なテーブルの関連機能を実現できます。

概要

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

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

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

最新のPHPコーディング基準とベストプラクティスは何ですか? 最新のPHPコーディング基準とベストプラクティスは何ですか? Mar 10, 2025 pm 06:16 PM

最新のPHPコーディング基準とベストプラクティスは何ですか?

PHP拡張機能とPECLを使用するにはどうすればよいですか? PHP拡張機能とPECLを使用するにはどうすればよいですか? Mar 10, 2025 pm 06:12 PM

PHP拡張機能とPECLを使用するにはどうすればよいですか?

PHPにメッセージキュー(rabbitmq、redis)を実装する方法は? PHPにメッセージキュー(rabbitmq、redis)を実装する方法は? Mar 10, 2025 pm 06:15 PM

PHPにメッセージキュー(rabbitmq、redis)を実装する方法は?

PHPアレイの重複排除は、パフォーマンスの損失について考慮する必要がありますか? PHPアレイの重複排除は、パフォーマンスの損失について考慮する必要がありますか? Mar 03, 2025 pm 04:47 PM

PHPアレイの重複排除は、パフォーマンスの損失について考慮する必要がありますか?

PHPアレイの重複排除のための最適化手法は何ですか PHPアレイの重複排除のための最適化手法は何ですか Mar 03, 2025 pm 04:50 PM

PHPアレイの重複排除のための最適化手法は何ですか

PHPアレイの重複排除は、キー名の一意性を利用できますか? PHPアレイの重複排除は、キー名の一意性を利用できますか? Mar 03, 2025 pm 04:51 PM

PHPアレイの重複排除は、キー名の一意性を利用できますか?

リフレクションを使用してPHPコードを分析および操作する方法は? リフレクションを使用してPHPコードを分析および操作する方法は? Mar 10, 2025 pm 06:12 PM

リフレクションを使用してPHPコードを分析および操作する方法は?

PHPアレイの重複排除のためのベストプラクティスは何ですか PHPアレイの重複排除のためのベストプラクティスは何ですか Mar 03, 2025 pm 04:41 PM

PHPアレイの重複排除のためのベストプラクティスは何ですか

See all articles