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

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

1. 개요

이번 글에서는 간단한 형태의 실시간 수정을 예로 들어 설명하겠습니다. 먼저 PHP 코드를 사용하여 양식을 생성해야 합니다. 아래와 같이

nbsp;html>


    <title>Table Example</title>
    <meta>


    <?php  
        $data = array(
            array("姓名","性别","年龄"),
            array("张三","男","20"),
            array("李四","女","22"),
            array("王五","男","21")
        );
    ?>
    
    

        ";                 foreach($row as $cell) {                     echo "";                 }                 echo "";             }         ?>     

$cell

위 코드는 네 사람의 이름, 성별, 나이 정보가 포함된 간단한 테이블을 생성합니다. PHP에서는 배열을 사용하여 테이블의 데이터를 나타낼 수 있습니다.

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

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

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

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

foreach($data as $row) {
    echo "<tr>";
    foreach($row as $i => $cell) {
        if($i==count($row)-1) {
            echo "<td><button>修改</button></td>";
        }
        else {
            echo "<td>$cell</td>";
        }
    }
    echo "</tr>";
}

여기에서는 수정 버튼을 클릭할 때 호출되는 JavaScript 함수 editRow가 사용됩니다. editRow，用于在点击修改按钮时调用。

2. 编写 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;>保存";
        form += "";
        
        // 将表单替换为数据输入框
        row.innerHTML = form;
    }
</script>

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

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

4. 编写服务端代码

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

JavaScript 함수 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 .= "";
    
    echo $table;
?>

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

JavaScript 함수 saveChanges를 작성하세요.

🎜🎜양식에 데이터를 입력한 후 AJAX 기술을 통해 수정된 데이터를 서버로 전송하고 양식을 업데이트해야 합니다. 이제 수정된 데이터를 저장하려면 JavaScript 함수 saveChanges를 작성해야 합니다. 이 함수는 다음 코드를 사용합니다. 🎜rrreee🎜이 함수는 테이블 데이터의 업데이트 작업을 처리하기 위해 XMLHttpRequest 개체를 통해 서버의 update.php 페이지에 POST 요청을 보냅니다. 서버 측에서 데이터 업데이트가 처리된 후 새로운 테이블 데이터가 반환되며, xmlhttp.responseText를 통해 테이블 ​​데이터를 얻고 업데이트할 수 있습니다. 🎜
🎜서버측 코드 작성🎜🎜🎜서버측에서는 테이블 데이터의 업데이트 작업을 처리하기 위해 update.php 페이지를 작성해야 합니다. 이 페이지의 코드는 다음과 같습니다. 🎜rrreee🎜이 페이지는 POST를 통해 클라이언트가 전달한 수정된 데이터를 수신한 다음, 데이터를 업데이트하고 업데이트된 데이터를 클라이언트에 반환합니다. 🎜🎜이제 양식 실시간 수정 과정이 모두 완료되었습니다. 브라우저에서 페이지를 열고 수정 버튼을 클릭한 후 팝업 입력 상자에 수정된 데이터를 입력하고 저장 버튼을 클릭하면 데이터 업데이트 효과를 확인할 수 있습니다. 🎜🎜3. 요약🎜🎜이 글에서는 PHP와 HTML 페이지에서 AJAX 기술을 통해 테이블 ​​데이터의 실시간 수정을 구현하는 방법을 소개합니다. 그 중 우리는 PHP를 사용하여 간단한 양식을 생성하고, JavaScript를 사용하여 테이블 데이터의 실시간 수정을 구현하고, 수정된 데이터를 서버로 전송하여 AJAX를 통해 처리합니다. 이 방법을 사용하면 표 형식의 데이터를 보다 편리하고 빠르게 조작할 수 있습니다. 그러나 실제 개발에서는 데이터의 보안과 정확성을 보장하기 위해 수신된 데이터를 엄격하게 검증하고 필터링하여 악의적인 공격과 데이터 오작동을 방지해야 한다는 점에 유의해야 합니다. 🎜

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