phpとajaxを使用して編集可能なテーブルを実装する方法
- PHPzオリジナル
- 2023-04-21 10:00:53734ブラウズ
はじめに
テーブルは、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ページ上に表形式で表示します。コードは次のとおりです。
<?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);
?>
- 編集可能な関数を追加
これで 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>
- データを更新するための 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 サイトの他の関連記事を参照してください。