php html表格怎麼實現即時修改-PHP問題-PHP中文網

首頁

後端開發

PHP問題

php html表格怎麼實現即時修改

PHPz

Apr 19, 2023 am 10:05 AM

在網頁開發中，表格是非常常用的一種元素。在表格中，我們經常需要對其中的資料進行修改，通常的方式是透過後端處理來更新資料。但是如果我們希望在前端即時直接修改表格數據，該怎麼實現呢？本文將介紹在 PHP 和 HTML 頁面中，如何透過 AJAX 技術實現表格資料即時修改。

一、概述

在本文中，我們將透過一個簡單的表格實現即時修改的範例來說明。首先，我們需要用 PHP 程式碼產生一個表格。如下所示：

<!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>

登入後複製

上述程式碼產生了一個簡單的表格，其中包含了四個人的姓名、性別和年齡資訊。在 PHP 中，我們可以使用陣列來表示表格中的資料。

二、即時修改表格資料

現在，我們要實現的是即時修改表格中的資料。我們可以透過以下步驟來實現：

在表格中增加一個修改按鈕。

在每一行的資料最後一列，增加一個按鈕，用來修改該行資料。使用以下程式碼：

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

登入後複製

這裡使用了一個 JavaScript 函數 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>

登入後複製

這裡定義了一個函數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>

登入後複製

該函數透過XMLHttpRequest 物件發送一個POST 請求到伺服器的update.php 頁面，用於處理表格資料的更新操作。在伺服器端處理完數據更新後，會傳回新的表格數據，透過 xmlhttp.responseText 取得到並更新表格數據。

寫服務端程式碼

在伺服器端，我們需要寫一個update.php 的頁面，用於處理表格資料的更新操作。此頁面代碼如下：

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

登入後複製

該頁面接收客戶端透過 POST 方式傳遞來的修改數據，然後進行數據更新操作，並將更新後的數據傳回給客戶端。

現在，我們已經完成了整個表格即時修改的過程。在瀏覽器中開啟頁面，點擊修改按鈕，在彈出的輸入框中輸入修改後的數據，點擊儲存按鈕即可看到數據更新的效果。

三、總結

本文介紹了在 PHP 和 HTML 頁面中，如何透過 AJAX 技術實現表格資料即時修改的方法。其中，我們使用 PHP 產生一個簡單的表格，使用 JavaScript 實作了表格資料的即時修改，並透過 AJAX 將修改後的資料傳送到伺服器端進行處理。此方法可以幫助我們更方便快速地操作表格資料。但要注意的是，在實際開發中，為了確保資料的安全性和正確性，我們需要對接收到的資料進行嚴格校驗和過濾，防止惡意攻擊和資料誤操作。

以上是php html表格怎麼實現即時修改的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn