suchen

Heim >Backend-Entwicklung >PHP-Problem >So realisieren Sie eine Echtzeitänderung der PHP-HTML-Tabelle

So realisieren Sie eine Echtzeitänderung der PHP-HTML-Tabelle

PHPz
PHPzOriginal
2023-04-19 10:05:211306Durchsuche

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>

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:

  1. 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>";
}

Hier wird eine JavaScript-Funktion editRow verwendet, die aufgerufen wird, wenn auf die Schaltfläche „Ändern“ geklickt wird. editRow，用于在点击修改按钮时调用。

  1. 编写 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>

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

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

  1. 编写服务端代码

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

    JavaScript-Funktion editRow schreiben.

    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;
?>

    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.

      🎜🎜Nachdem wir die Daten in das Formular eingegeben haben, müssen wir die geänderten Daten über die AJAX-Technologie an den Server senden und das Formular aktualisieren. Jetzt müssen wir die JavaScript-Funktion saveChanges schreiben, um die geänderten Daten zu speichern. Diese Funktion verwendet den folgenden Code: 🎜rrreee🎜Diese Funktion sendet über das Objekt XMLHttpRequest eine POST-Anfrage an die Seite update.php des Servers, um den Aktualisierungsvorgang der Tabellendaten abzuwickeln. Nachdem die Datenaktualisierung auf der Serverseite verarbeitet wurde, werden neue Tabellendaten zurückgegeben und die Tabellendaten können über xmlhttp.responseText abgerufen und aktualisiert werden. 🎜
        🎜Serverseitigen Code schreiben🎜🎜🎜Auf der Serverseite müssen wir eine update.php-Seite schreiben, um den Aktualisierungsvorgang der Tabellendaten abzuwickeln. Der Code dieser Seite lautet wie folgt: 🎜rrreee🎜Diese Seite empfängt die vom Client über POST übergebenen geänderten Daten, aktualisiert dann die Daten und gibt die aktualisierten Daten an den Client zurück. 🎜🎜Jetzt haben wir den gesamten Prozess der Echtzeitänderung des Formulars abgeschlossen. Öffnen Sie die Seite im Browser, klicken Sie auf die Schaltfläche „Ändern“, geben Sie die geänderten Daten in das Popup-Eingabefeld ein und klicken Sie auf die Schaltfläche „Speichern“, um die Auswirkungen der Datenaktualisierung anzuzeigen. 🎜🎜3. Zusammenfassung🎜🎜Dieser Artikel stellt vor, wie man Tabellendaten in Echtzeit mithilfe der AJAX-Technologie in PHP- und HTML-Seiten ändert. Unter anderem verwenden wir PHP, um eine einfache Tabelle zu generieren, verwenden JavaScript, um Echtzeitänderungen an Tabellendaten zu implementieren, und senden die geänderten Daten zur Verarbeitung über AJAX an den Server. Diese Methode kann uns helfen, Tabellendaten bequemer und schneller zu verarbeiten. Es ist jedoch zu beachten, dass wir in der tatsächlichen Entwicklung zur Gewährleistung der Sicherheit und Richtigkeit der Daten die empfangenen Daten streng überprüfen und filtern müssen, um böswillige Angriffe und Datenfehloperationen zu verhindern. 🎜

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!

php JavaScript ajax html 对象
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie PHP, um eine Eins-zu-viele-Korrelationsabfrage durchzuführenNächster Artikel：So verwenden Sie PHP, um eine Eins-zu-viele-Korrelationsabfrage durchzuführen

In Verbindung stehende Artikel

Mehr sehen