So realisieren Sie eine Echtzeitänderung der PHP-HTML-Tabelle
In der Webentwicklung sind Tabellen ein sehr häufig verwendetes Element. In Tabellen müssen wir häufig die darin enthaltenen Daten ändern. Der übliche Weg besteht darin, die Daten durch Back-End-Verarbeitung zu aktualisieren. Aber wie erreichen wir das, wenn wir die Tabellendaten direkt in Echtzeit im Front-End ändern möchten? In diesem Artikel erfahren Sie, wie Sie die Echtzeitänderung von Tabellendaten mithilfe der AJAX-Technologie in PHP- und HTML-Seiten realisieren.
1. Übersicht
In diesem Artikel veranschaulichen wir die Echtzeitänderung eines einfachen Formulars. Zuerst müssen wir ein Formular mit PHP-Code generieren. Wie unten gezeigt:
<!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>Der obige Code generiert eine einfache Tabelle mit den Namens-, Geschlechts- und Altersinformationen von vier Personen. In PHP können wir Arrays verwenden, um Daten in Tabellen darzustellen.
2. Ändern Sie die Tabellendaten in Echtzeit.
Was wir nun erreichen möchten, ist, die Daten in der Tabelle in Echtzeit zu ändern. Wir können dies durch die folgenden Schritte erreichen:
- Fügen Sie der Tabelle eine Änderungsschaltfläche hinzu.
Fügen Sie in der letzten Datenspalte jeder Zeile eine Schaltfläche hinzu, um die Daten in dieser Zeile zu ändern. Verwenden Sie den folgenden Code:
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>";
}Hier wird eine JavaScript-Funktion editRow verwendet, die aufgerufen wird, wenn auf die Schaltfläche „Ändern“ geklickt wird. editRow，用于在点击修改按钮时调用。
- 编写 JavaScript 函数
editRow。
在 HTML 页面中增加如下 JavaScript 代码：
<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 对象发送一个 POST 请求到服务器的 update.php 页面，用于处理表格数据的更新操作。在服务器端处理完数据更新后，会返回新的表格数据，通过 xmlhttp.responseText 获取到并更新表格数据。
- 编写服务端代码
在服务器端，我们需要编写一个 update.php
- JavaScript-Funktion
editRow schreiben.
Fügen Sie den folgenden JavaScript-Code zur HTML-Seite hinzu:
<?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;
?>Eine Funktion editRow wird hier definiert. Wenn auf die Schaltfläche „Ändern“ geklickt wird, zeigt die Funktion die Daten der aktuellen Zeile als Formular an für die Bequemlichkeit der Benutzer Überarbeiten.
JavaScript-Funktion saveChanges schreiben.
saveChanges schreiben, um die geänderten Daten zu speichern. Diese Funktion verwendet den folgenden Code: 🎜rrreee🎜Diese Funktion sendet über das Objekt XMLHttpRequest eine POST-Anfrage an die Seite update.php des Servers, um den Aktualisierungsvorgang der Tabellendaten abzuwickeln. Nachdem die Datenaktualisierung auf der Serverseite verarbeitet wurde, werden neue Tabellendaten zurückgegeben und die Tabellendaten können über xmlhttp.responseText abgerufen und aktualisiert werden. 🎜- 🎜Serverseitigen Code schreiben🎜🎜🎜Auf der Serverseite müssen wir eine
update.php-Seite schreiben, um den Aktualisierungsvorgang der Tabellendaten abzuwickeln. Der Code dieser Seite lautet wie folgt: 🎜rrreee🎜Diese Seite empfängt die vom Client über POST übergebenen geänderten Daten, aktualisiert dann die Daten und gibt die aktualisierten Daten an den Client zurück. 🎜🎜Jetzt haben wir den gesamten Prozess der Echtzeitänderung des Formulars abgeschlossen. Öffnen Sie die Seite im Browser, klicken Sie auf die Schaltfläche „Ändern“, geben Sie die geänderten Daten in das Popup-Eingabefeld ein und klicken Sie auf die Schaltfläche „Speichern“, um die Auswirkungen der Datenaktualisierung anzuzeigen. 🎜🎜3. Zusammenfassung🎜🎜Dieser Artikel stellt vor, wie man Tabellendaten in Echtzeit mithilfe der AJAX-Technologie in PHP- und HTML-Seiten ändert. Unter anderem verwenden wir PHP, um eine einfache Tabelle zu generieren, verwenden JavaScript, um Echtzeitänderungen an Tabellendaten zu implementieren, und senden die geänderten Daten zur Verarbeitung über AJAX an den Server. Diese Methode kann uns helfen, Tabellendaten bequemer und schneller zu verarbeiten. Es ist jedoch zu beachten, dass wir in der tatsächlichen Entwicklung zur Gewährleistung der Sicherheit und Richtigkeit der Daten die empfangenen Daten streng überprüfen und filtern müssen, um böswillige Angriffe und Datenfehloperationen zu verhindern. 🎜Das obige ist der detaillierte Inhalt vonSo realisieren Sie eine Echtzeitänderung der PHP-HTML-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
PHP 8 JIT (Just-in-Time) -Kompilation: Wie es die Leistung verbessert.
Mar 25, 2025 am 10:37 AM
Die JIT -Kompilierung von PHP 8 verbessert die Leistung, indem häufig ausgeführte Code in den Maschinencode zusammengestellt wird, um Anwendungen mit schweren Berechnungen zugute und die Ausführungszeiten zu reduzieren.
PHP Secure-Datei-Uploads: Verhindern von Sicherheitslücken im Zusammenhang mit Datei.
Mar 26, 2025 pm 04:18 PM
In dem Artikel wird das Sicherung von PHP -Dateien -Uploads erläutert, um Schwachstellen wie die Code -Injektion zu verhindern. Es konzentriert sich auf die Dateitypvalidierung, den sicheren Speicher und die Fehlerbehandlung, um die Anwendungssicherheit zu verbessern.
OWASP Top 10 PHP: Beschreiben und mildern gemeinsame Schwachstellen.
Mar 26, 2025 pm 04:13 PM
In dem Artikel werden OWASP Top 10 Schwachstellen in PHP- und Minderungsstrategien erörtert. Zu den wichtigsten Problemen gehören die Injektion, die kaputte Authentifizierung und XSS mit empfohlenen Tools zur Überwachung und Sicherung von PHP -Anwendungen.
PHP -Verschlüsselung: Symmetrische und asymmetrische Verschlüsselung.
Mar 25, 2025 pm 03:12 PM
In dem Artikel wird die symmetrische und asymmetrische Verschlüsselung in PHP erörtert und ihre Eignung, Leistung und Sicherheitsunterschiede verglichen. Die symmetrische Verschlüsselung ist schneller und für Massendaten geeignet, während asymmetrisch für den sicheren Schlüsselaustausch verwendet wird.
PHP -Authentifizierung & amp; Autorisierung: sichere Implementierung.
Mar 25, 2025 pm 03:06 PM
In dem Artikel wird die Implementierung einer robusten Authentifizierung und Autorisierung in PHP erörtert, um den nicht autorisierten Zugriff zu verhindern, Best Practices zu beschreiben und sicherheitsrelevante Tools zu empfehlen.
Wie rufen Sie Daten mit PHP aus einer Datenbank ab?
Mar 20, 2025 pm 04:57 PM
In Artikel wird das Abrufen von Daten aus Datenbanken mithilfe von PHP, die Schritte, Sicherheitsmaßnahmen, Optimierungstechniken und gemeinsame Fehler bei Lösungen erfasst.
PHP -API -Rate Begrenzung: Implementierungsstrategien.
Mar 26, 2025 pm 04:16 PM
In dem Artikel werden Strategien zur Implementierung der API-Rate in PHP erörtert, einschließlich Algorithmen wie Token-Bucket und Leaky Bucket sowie Bibliotheken wie Symfony/Rate-Limiter. Es deckt auch die Überwachung, die dynamischen Einstellungsgeschwindigkeiten und die Hand ab
PHP -CSRF -Schutz: Wie Sie CSRF -Angriffe verhindern.
Mar 25, 2025 pm 03:05 PM
In dem Artikel werden Strategien erörtert, um CSRF-Angriffe in PHP zu verhindern, einschließlich der Verwendung von CSRF-Token, selben Cookies und ordnungsgemäßem Sitzungsmanagement.
