PHP HTMLテーブルのリアルタイム変更を実現する方法
- PHPzオリジナル
- 2023-04-19 10:05:211249ブラウズ
Web 開発では、テーブルは非常によく使用される要素です。テーブルでは、テーブル内のデータを変更する必要があることがよくありますが、通常はバックエンド処理を通じてデータを更新します。しかし、フロントエンドでテーブル データをリアルタイムで直接変更したい場合、どうすれば実現できるでしょうか?この記事では、PHP および HTML ページで AJAX テクノロジーを使用してテーブル データのリアルタイム変更を実現する方法を紹介します。
1. 概要
この記事では、単純なフォームのリアルタイム変更の例を示します。まず、PHP コードを使用してフォームを生成する必要があります。以下に示すように:
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<meta charset="utf-8">
</head>
<body>
<?php
$data = array(
array("姓名","性别","年龄"),
array("张三","男","20"),
array("李四","女","22"),
array("王五","男","21")
);
?>
<table border="1" cellpadding="5">
<?php
foreach($data as $row) {
echo "<tr>";
foreach($row as $cell) {
echo "<td>$cell</td>";
}
echo "</tr>";
}
?>
</table>
</body>
</html>
上記のコードは、4 人の名前、性別、年齢の情報を含む単純なテーブルを生成します。 PHP では、配列を使用してテーブル内のデータを表すことができます。
2. テーブル データをリアルタイムで変更する
ここで、私たちが達成したいのは、テーブル内のデータをリアルタイムで変更することです。これは、次の手順で実現できます。
- テーブルに変更ボタンを追加します。
各行のデータの最後の列に、その行のデータを変更するボタンを追加します。次のコードを使用します。
foreach($data as $row) {
echo "<tr>";
foreach($row as $i => $cell) {
if($i==count($row)-1) {
echo "<td><button onclick='editRow(event)'>修改</button></td>";
}
else {
echo "<td>$cell</td>";
}
}
echo "</tr>";
}
ここでは、変更ボタンがクリックされたときに呼び出される JavaScript 関数 editRow が使用されています。
- JavaScript 関数
editRowを作成します。
次の JavaScript コードを HTML ページに追加します:
<script>
function editRow(event) {
// 获取当前点击按钮所在行以及行内的数据
var row = event.target.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
var data = [];
for(var i=0;i<cells.length-1;i++) {
data.push(cells[i].innerText);
}
// 将数据填入表单中
var form = "<form>";
form += "<input type='hidden' name='row' value='"+row.rowIndex+"'>";
form += "<input type='text' name='name' value='"+data[0]+"'>";
form += "<input type='text' name='gender' value='"+data[1]+"'>";
form += "<input type='text' name='age' value='"+data[2]+"'>";
form += "<button type='button' onclick='saveChanges(event)'>保存</button>";
form += "</form>";
// 将表单替换为数据输入框
row.innerHTML = form;
}
</script>
ここに関数 editRow が定義されています。変更ボタンをクリックすると、関数が編集されます現在の行 データはフォームとして表示されるため、ユーザーが変更するのに便利です。
- JavaScript 関数
saveChangesを作成します。
フォームにデータを入力した後、AJAX テクノロジを通じて変更されたデータをサーバーに送信し、フォームを更新する必要があります。ここで、変更されたデータを保存するために JavaScript 関数 saveChanges を記述する必要があります。この関数は次のコードを使用します。
<script>
function saveChanges(event) {
// 获取当前修改的数据
var form = event.target.parentNode;
var rowIndex = form.row.value;
var name = form.name.value;
var gender = form.gender.value;
var age = form.age.value;
var data = "rowIndex="+rowIndex+"&name="+name+"&gender="+gender+"&age="+age;
// 发送 AJAX 请求
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
// 更新表格数据
var row = form.parentNode;
row.innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST","update.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}
</script>
この関数は、XMLHttpRequest オブジェクトを介してサーバーの update.php ページに POST リクエストを送信します。このオブジェクトは、テーブルデータの更新操作です。データ更新がサーバー側で処理されると、新しいテーブル データが返され、xmlhttp.responseText を通じてテーブル データを取得および更新できます。
- サーバー側のコードを記述する
サーバー側では、テーブルの更新操作を処理するための update.php ページを記述する必要があります。データ 。このページのコードは次のとおりです。
<?php
// 获取 POST 数据
$rowIndex = $_POST["rowIndex"];
$name = $_POST["name"];
$gender = $_POST["gender"];
$age = $_POST["age"];
// 将新的数据返回给客户端
$data = array(
array("姓名","性别","年龄"),
array($name,$gender,$age)
);
$table = "<table border='1' cellpadding='5'>";
foreach($data as $row) {
$table .= "<tr>";
foreach($row as $cell) {
$table .= "<td>$cell</td>";
}
$table .= "</tr>";
}
$table .= "</table>";
echo $table;
?>
このページは、クライアントから POST 経由で渡された変更されたデータを受信し、データを更新して、更新されたデータをクライアントに返します。
これで、フォーム全体のリアルタイム変更プロセスが完了しました。ブラウザでページを開き、変更ボタンをクリックし、ポップアップ入力ボックスに変更したデータを入力し、保存ボタンをクリックしてデータ更新の効果を確認します。
3. 概要
この記事では、PHP および HTML ページで AJAX テクノロジを使用してテーブル データのリアルタイム変更を実現する方法を紹介します。その中で、PHP を使用して単純なフォームを生成し、JavaScript を使用してテーブル データのリアルタイム変更を実装し、変更されたデータを AJAX を介して処理するためにサーバーに送信します。この方法は、表形式のデータをより便利かつ迅速に操作するのに役立ちます。ただし、実際の開発においては、データの安全性と正確性を確保するために、悪意のある攻撃やデータの誤操作を防ぐために、受信したデータを厳密に検証およびフィルタリングする必要があることに注意してください。
以上がPHP HTMLテーブルのリアルタイム変更を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。