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