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 :

nbsp;html>


    <title>Table Example</title>
    <meta>


    <?php  
        $data = array(
            array("姓名","性别","年龄"),
            array("张三","男","20"),
            array("李四","女","22"),
            array("王五","男","21")
        );
    ?>
    
    

        ";                 foreach($row as $cell) {                     echo "";                 }                 echo "";             }         ?>     

$cell

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 :

1. 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>修改</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，用于在点击修改按钮时调用。

2. 编写 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=&#39;hidden&#39; name=&#39;row&#39; value=&#39;"+row.rowIndex+"&#39;>";
        form += "<input type=&#39;text&#39; name=&#39;name&#39; value=&#39;"+data[0]+"&#39;>";
        form += "<input type=&#39;text&#39; name=&#39;gender&#39; value=&#39;"+data[1]+"&#39;>";
        form += "<input type=&#39;text&#39; name=&#39;age&#39; value=&#39;"+data[2]+"&#39;>";
        form += "<button type=&#39;button&#39; onclick=&#39;saveChanges(event)&#39;>保存";
        form += "";
        
        // 将表单替换为数据输入框
        row.innerHTML = form;
    }
</script>

这里定义了一个函数 editRow，在点击修改按钮时，该函数会将当前行的数据显示为一个表单，方便用户修改。

3. 编写 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 获取到并更新表格数据。

4. 编写服务端代码

在服务器端，我们需要编写一个 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=&#39;1&#39; cellpadding=&#39;5&#39;>";
    foreach($data as $row) {
        $table .= "<tr>";
        foreach($row as $cell) {
            $table .= "<td>$cell</td>";
        }
        $table .= "</tr>";
    }
    $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.

🎜🎜Après avoir saisi les données dans le formulaire, nous devons envoyer les données modifiées au serveur via la technologie AJAX et mettre à jour le formulaire. Maintenant, nous devons écrire la fonction JavaScript 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!