はじめに
テーブルは、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;
データベースからユーザー情報を読み取るための「table.php」という名前の php ファイルを作成します。 Webページ上に表形式で表示します。コードは次のとおりです。
"; while ($row = mysqli_fetch_assoc($result)) { echo " ID 姓名 邮箱 电话 "; } echo ""; // 关闭数据库连接 mysqli_close($conn); ?> " . $row['id'] . " " . $row['name'] . " " . $row['email'] . " " . $row['phone'] . "
これで Web ページにユーザー情報を表示できるようになりましたが、ユーザーが次の方法でデータを編集できるようにしたいと考えています。フォーム。この機能を実現するには、JavaScript コードを追加する必要があります。
まず、「contenteditable」属性を追加して、表のセルを編集可能な状態にする必要があります。さらに、セル内のコンテンツが変更されたときに、変更されたデータをサーバーに送信するためのイベント リスナーを追加する必要もあります。
コードは次のとおりです:
可编辑表格
最後に、「update_table」という名前の php ファイルを作成する必要があります。 .php" 、新しいデータをデータベースに更新するために使用されます。コードは次のとおりです:
この時点で、php と ajax を使用して編集可能なテーブルを実装するすべての手順が完了しました。Web ページを更新すると、編集可能なテーブルの関連機能を実現できます。
概要
この記事では、php と ajax を使用して編集可能なテーブルを実装する方法を紹介しました。 「contenteditable」属性とイベント リスナーを使用すると、テーブルのセルを編集可能にし、変更されたデータをサーバーにアップロードして、ajax 経由で更新できます。このようにして、ユーザーは Web ページを通じてデータを簡単に編集および保存できます。
以上がphpとajaxを使用して編集可能なテーブルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。