So realisieren Sie eine Echtzeitänderung der PHP-HTML-Tabelle-PHP-Problem-php.cn

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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=&#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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

编写服务端代码

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

editRow

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=&#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;
?>

Nach dem Login kopieren

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

XMLHttpRequest

update.php

xmlhttp.responseText

update.php

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!