Comment réaliser une modification en temps réel d'une table HTML php-Problème PHP-php.cn

Comment réaliser une modification en temps réel d'une table HTML php

PHPz

Libérer： 2023-04-19 10:47:13

original

1333 Les gens l'ont consulté

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>

Copier après la connexion

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=&#39;editRow(event)&#39;>修改</button></td>";
        }
        else {
            echo "<td>$cell</td>";
        }
    }
    echo "</tr>";
}

Copier après la connexion

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=&#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;>保存</button>";
        form += "</form>";
        
        // 将表单替换为数据输入框
        row.innerHTML = form;
    }
</script>

Copier après la connexion

这里定义了一个函数 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>

Copier après la connexion

该函数通过 XMLHttpRequest 对象发送一个 POST 请求到服务器的 update.php 页面，用于处理表格数据的更新操作。在服务器端处理完数据更新后，会返回新的表格数据，通过 xmlhttp.responseText 获取到并更新表格数据。

编写服务端代码

在服务器端，我们需要编写一个 update.php

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 .= "</table>";
    
    echo $table;
?>

Copier après la connexion

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

update.php

XMLHttpRequest

xmlhttp.responseText

update.php

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!