développement back-end
Problème PHP
Comment réaliser une modification en temps réel d'une table HTML php
Comment réaliser une modification en temps réel d'une table HTML php
Dans le développement Web, les tableaux sont un élément très couramment utilisé. Dans les tableaux, nous devons souvent modifier les données qu'ils contiennent. La méthode habituelle consiste à mettre à jour les données via un traitement back-end. Mais si l’on souhaite modifier directement les données de la table en temps réel sur le front end, comment y parvenir ? Cet article expliquera comment réaliser une modification en temps réel des données de table via la technologie AJAX dans les pages PHP et HTML.
1. Présentation
Dans cet article, nous allons l'illustrer à travers un exemple de modification en temps réel d'un formulaire simple. Tout d’abord, nous devons générer un formulaire en utilisant du code PHP. Comme indiqué ci-dessous :
<!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>Le code ci-dessus génère un tableau simple contenant le nom, le sexe et l'âge de quatre personnes. En PHP, nous pouvons utiliser des tableaux pour représenter des données dans des tableaux.
2. Modifier les données du tableau en temps réel
Maintenant, ce que nous voulons réaliser, c'est modifier les données du tableau en temps réel. Nous pouvons y parvenir en suivant les étapes suivantes :
- Ajoutez un bouton de modification au tableau.
Dans la dernière colonne des données de chaque ligne, ajoutez un bouton pour modifier les données de cette ligne. Utilisez le code suivant :
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>";
}Une fonction JavaScript editRow est utilisée ici pour être appelée lorsque l'on clique sur le bouton de modification. 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
- Écrivez la fonction JavaScript
editRow.
Ajoutez le code JavaScript suivant à la page HTML :
<?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;
?>Une fonction editRow est définie ici Lorsque vous cliquez sur le bouton Modifier, la fonction affichera les données de la ligne actuelle sous forme de formulaire. pour la commodité des utilisateurs Réviser.
Écrivez la fonction JavaScript saveChanges.
saveChanges pour enregistrer les données modifiées. Cette fonction utilise le code suivant : 🎜rrreee🎜Cette fonction envoie une requête POST à la page update.php du serveur via l'objet XMLHttpRequest pour gérer l'opération de mise à jour des données de la table. Une fois la mise à jour des données traitée côté serveur, de nouvelles données de table seront renvoyées et les données de table pourront être obtenues et mises à jour via xmlhttp.responseText. 🎜- 🎜Écrire du code côté serveur🎜🎜🎜Côté serveur, nous devons écrire une page
update.php pour gérer l'opération de mise à jour des données de la table. Le code de cette page est le suivant : 🎜rrreee🎜Cette page reçoit les données modifiées transmises par le client via POST, puis met à jour les données et renvoie les données mises à jour au client. 🎜🎜Maintenant, nous avons terminé tout le processus de modification du formulaire en temps réel. Ouvrez la page dans le navigateur, cliquez sur le bouton Modifier, saisissez les données modifiées dans la zone de saisie contextuelle et cliquez sur le bouton Enregistrer pour voir l'effet de la mise à jour des données. 🎜🎜3. Résumé🎜🎜Cet article présente comment réaliser une modification en temps réel des données de table via la technologie AJAX dans les pages PHP et HTML. Parmi eux, nous utilisons PHP pour générer un formulaire simple, utilisons JavaScript pour implémenter la modification en temps réel des données du tableau et envoyons les données modifiées au serveur pour traitement via AJAX. Cette méthode peut nous aider à exploiter les données tabulaires plus facilement et plus rapidement. Cependant, il convient de noter que dans le développement réel, afin de garantir la sécurité et l'exactitude des données, nous devons strictement vérifier et filtrer les données reçues afin d'éviter les attaques malveillantes et les erreurs d'exploitation des données. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
PHP 8 JIT (juste à temps) Compilation: comment cela améliore les performances.
Mar 25, 2025 am 10:37 AM
La compilation JIT de PHP 8 améliore les performances en compilant le code fréquemment exécuté en code machine, bénéficiant aux applications avec des calculs lourds et en réduisant les temps d'exécution.
Téléchargements de fichiers sécurisés PHP: prévention des vulnérabilités liées au fichier.
Mar 26, 2025 pm 04:18 PM
L'article traite de la sécurisation des téléchargements de fichiers PHP pour éviter les vulnérabilités comme l'injection de code. Il se concentre sur la validation du type de fichier, le stockage sécurisé et la gestion des erreurs pour améliorer la sécurité de l'application.
OWASP Top 10 PHP: Décrivez et atténue les vulnérabilités communes.
Mar 26, 2025 pm 04:13 PM
L'article traite des 10 meilleures vulnérabilités de l'OWASP dans les stratégies PHP et d'atténuation. Les problèmes clés incluent l'injection, l'authentification brisée et les XS, avec des outils recommandés pour surveiller et sécuriser les applications PHP.
Encryption PHP: cryptage symétrique vs asymétrique.
Mar 25, 2025 pm 03:12 PM
L'article traite du cryptage symétrique et asymétrique en PHP, en comparant leur aptitude, leurs performances et leurs différences de sécurité. Le chiffrement symétrique est plus rapide et adapté aux données en vrac, tandis que l'asymétrique est utilisé pour l'échange de clés sécurisé.
Authentification PHP & amp; Autorisation: mise en œuvre sécurisée.
Mar 25, 2025 pm 03:06 PM
L'article examine la mise en œuvre d'authentification et d'autorisation robustes dans PHP pour empêcher un accès non autorisé, détaillant les meilleures pratiques et recommandant des outils d'amélioration de la sécurité.
Comment récupérer les données d'une base de données à l'aide de PHP?
Mar 20, 2025 pm 04:57 PM
L'article discute de la récupération des données des bases de données à l'aide de PHP, couvrant les étapes, les mesures de sécurité, les techniques d'optimisation et les erreurs communes avec des solutions. COMMANDE CHAPITRE: 159
Limitation du taux de l'API PHP: stratégies de mise en œuvre.
Mar 26, 2025 pm 04:16 PM
L'article traite des stratégies de mise en œuvre de la limitation du taux d'API en PHP, y compris des algorithmes comme un godet de jeton et un seau qui fuit, et en utilisant des bibliothèques comme Symfony / Rate-Limiter. Il couvre également la surveillance, l'ajustement dynamiquement des limites de taux et la main
Protection PHP CSRF: comment empêcher les attaques du CSRF.
Mar 25, 2025 pm 03:05 PM
L'article traite des stratégies pour prévenir les attaques du CSRF dans PHP, notamment en utilisant des jetons CSRF, des cookies de même site et une bonne gestion de session.
