Comment utiliser PHP pour implémenter l'édition directe des tables

Avec le développement rapide de la technologie Internet, le champ d'application des applications Web devient de plus en plus étendu. Les fonctions d'affichage et de collecte de données fournies par les applications Web jouent un rôle important dans le fonctionnement et la gestion de nombreuses entreprises et particuliers. La présentation et la collecte de données tabulaires sont l'une des fonctions les plus courantes dans les applications Web. Dans ce processus, la fonction d'édition des données des tableaux est indispensable, et réaliser l'édition directe des tableaux est sans aucun doute un moyen important pour améliorer l'efficacité opérationnelle et optimiser l'expérience utilisateur. Cet article explique comment utiliser PHP pour implémenter la fonction d'édition directe des tables.

1. Technologie d'édition directe

La technologie d'édition directe est une technologie qui permet l'édition directe de tableaux dans les applications Web. Dans des circonstances traditionnelles, la modification d'un formulaire nécessite deux étapes : cliquez sur le bouton Modifier pour accéder à la page de modification, remplissez les données qui doivent être modifiées et soumettez-les. La technologie d'édition directe permet aux utilisateurs de modifier les données directement dans le tableau et d'enregistrer ces opérations instantanément sans opérer sur une autre page. Cela peut réduire les étapes opérationnelles de l'utilisateur, améliorer l'efficacité opérationnelle et optimiser l'expérience utilisateur.

Le modèle technologique d'édition directe est basé sur la technologie Ajax, qui peut envoyer des requêtes HTTP au serveur via la technologie JS frontale pour modifier et enregistrer des données sans actualiser la page.

2. Implémenter l'édition directe du tableau

Pour créer un tableau en HTML, vous devez ajouter une fonction d'écoute d'événement de clic à la cellule actuelle dans chaque colonne du tableau, de sorte que lorsque l'utilisateur clique sur une certaine cellule, l'événement de clic sera déclenchée. Fonction d'écoute pour effectuer des opérations d'édition de cellules. Vous pouvez utiliser le code jQuery suivant pour implémenter un événement de clic sur une cellule :

$(document).ready(function(){
    $("td").click(function(){
        $(this).attr("contenteditable","true"); // 使表格单元格变为可编辑状态
    });
});

Parmi eux, la méthode attr() peut être utilisée pour définir ou renvoyer la valeur d'attribut de l'élément sélectionné, et l'attribut contenteditable est utilisé pour définir la cible. élément à un état modifiable.

Ensuite, une fois la modification des cellules du tableau terminée, les données doivent être soumises au serveur pour être enregistrées. La technologie Ajax peut être utilisée pour implémenter cette fonctionnalité en PHP. Vous pouvez utiliser la méthode AJAX dans la bibliothèque jQuery pour envoyer des données au serveur Côté serveur, vous pouvez utiliser la variable $_POST pour obtenir les données du formulaire. La fonction de soumission des données AJAX est implémentée via le code suivant :

$(document).ready(function(){
    $("td").blur(function(){
        $.ajax({
            type: "POST",
            url: "update_table.php",//服务器端接收数据的地址
            data: {value: $(this).text(),id: $(this).attr("id")},
            success: function(response){
                alert(response);
            }
        });
        $(this).attr("contenteditable","false"); // 编辑完成后将表格单元格设置为不可编辑状态
    });
});

Dans le code ci-dessus, la méthode blur() est utilisée pour envoyer les données de la cellule à la page update_table.php après que la cellule du tableau ferme le mode d'édition. La méthode d'envoi des données est POST, et la valeur et l'identifiant sont la valeur et l'identifiant de la cellule du tableau. Le rappel de réussite est une méthode déclenchée après un accès Ajax réussi. Des informations d'invite d'opération peuvent être ajoutées à la méthode.

Ce qui suit est un exemple de code côté serveur PHP :

<?php
$value=$_POST[&#39;value&#39;];
$id=$_POST["id"];
$con=mysqli_connect("localhost","root","123456","testdb");
if(mysqli_connect_errno()){
    echo "连接失败：".mysqli_connect_error();
}
$sql = "UPDATE testtable SET name=&#39;$value&#39; where id=&#39;$id&#39;";
if(!mysqli_query($con,$sql)){
    die(&#39;Error: &#39;.mysqli_error($con));
}
echo "保存成功";
mysqli_close($con);
?>

Dans ce code, la variable $value représente la valeur modifiée par l'utilisateur dans le tableau, et $id représente la valeur ID de la ligne actuelle. Ce code utilise la bibliothèque de fonctions MySQLi pour se connecter à la base de données MySQL, met à jour les données modifiées par l'utilisateur dans la table de test de la base de données pour l'ID spécifié et génère enfin un message de sauvegarde réussie sur la page.

3. Résumé

La mise en œuvre de la fonction d'édition directe des tables via PHP peut grandement améliorer l'efficacité opérationnelle de l'utilisateur et optimiser l'expérience utilisateur. Cet article présente le processus d'utilisation de la technologie Ajax pour réaliser une édition directe, en créant un tableau HTML et en utilisant la syntaxe jQuery pour modifier et enregistrer les cellules du tableau. Utilisez le code PHP côté serveur pour mettre à jour les données dans la table de base de données MySQL spécifiée. Ces techniques d'écriture de code ne sont pas difficiles à mettre en œuvre pour les développeurs disposant de certaines bases de développement Web et sont applicables à la plupart des applications Web. J'espère que cet article sera utile aux développeurs PHP pour apprendre et implémenter la fonction d'édition directe des tableaux.

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!