PHP HTML 테이블의 실시간 수정을 구현하는 방법-PHP 문제-php.cn

집

백엔드 개발

PHP 문제

PHP HTML 테이블의 실시간 수정을 구현하는 방법

PHPz

Apr 19, 2023 am 10:05 AM

웹 개발에서 테이블은 매우 일반적으로 사용되는 요소입니다. 테이블에서는 데이터를 수정해야 하는 경우가 많습니다. 일반적인 방법은 백엔드 처리를 통해 데이터를 업데이트하는 것입니다. 하지만 프런트 엔드에서 실시간으로 테이블 데이터를 직접 수정하려면 어떻게 해야 할까요? 이 기사에서는 PHP 및 HTML 페이지에서 AJAX 기술을 통해 테이블 데이터의 실시간 수정을 구현하는 방법을 소개합니다.

1. 개요

이번 글에서는 간단한 형태의 실시간 수정을 예로 들어 설명하겠습니다. 먼저 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에서는 배열을 사용하여 테이블의 데이터를 나타낼 수 있습니다.

2. 실시간으로 테이블 데이터 수정

이제 우리가 원하는 것은 테이블의 데이터를 실시간으로 수정하는 것입니다. 다음 단계를 통해 이를 달성할 수 있습니다.

테이블에 수정 버튼을 추가합니다.

각 행의 데이터 마지막 열에 해당 행의 데이터를 수정하는 버튼을 추가하세요. 다음 코드를 사용하세요.

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가 사용됩니다. 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

editRow

HTML 페이지에 다음 JavaScript 코드를 추가하세요.

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

로그인 후 복사

여기에 editRow 함수가 정의되어 있습니다. 수정 버튼을 클릭하면 해당 함수가 현재 행의 데이터를 양식으로 표시합니다. 이용자의 편의를 위해 개정합니다.

JavaScript 함수 saveChanges를 작성하세요.

saveChanges

XMLHttpRequest

update.php

xmlhttp.responseText

update.php

위 내용은 PHP HTML 테이블의 실시간 수정을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.