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

はじめに

テーブルは、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;

2. php ファイルの作成

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

ID姓名邮箱电话"; while ($row = mysqli_fetch_assoc($result)) { echo "" . $row['id'] . "" . $row['name'] . "" . $row['email'] . "" . $row['phone'] . ""; } echo ""; // 关闭数据库连接 mysqli_close($conn); ?>

3. 編集可能な関数を追加

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

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

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

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

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

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

概要

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

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