How to realize real-time modification of php html table-PHP Problem-php.cn

How to realize real-time modification of php html table

PHPz

Release： 2023-04-19 10:47:13

Original

1338 people have browsed it

In web development, tables are a very commonly used element. In tables, we often need to modify the data in it. The usual way is to update the data through back-end processing. But if we want to directly modify the table data in real time on the front end, how to achieve it? This article will introduce how to realize real-time modification of table data through AJAX technology in PHP and HTML pages.

1. Overview

In this article, we will illustrate through an example of real-time modification of a simple form. First, we need to generate a form using PHP code. As shown below:

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

Copy after login

The above code generates a simple table containing the name, gender and age information of four people. In PHP, we can use arrays to represent data in tables.

2. Modify the table data in real time

Now, what we want to achieve is to modify the data in the table in real time. We can achieve this through the following steps:

Add a modify button to the table.

In the last column of the data in each row, add a button to modify the data in that row. Use the following 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>";
}

Copy after login

A JavaScript function editRow is used here to be called when the modify button is clicked.

Write JavaScript function editRow.

Add the following JavaScript code to the HTML page:

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

Copy after login

A function editRow is defined here. When the modify button is clicked, the function will edit the current row The data is displayed as a form, which is convenient for users to modify.

Write JavaScript function saveChanges.

After entering the data in the form, we need to send the modified data to the server through AJAX technology and update the form. Now, we need to write the JavaScript function saveChanges to save the modified data. This function uses the following code:

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

Copy after login

This function sends a POST request to the server's update.php page through the XMLHttpRequest object to handle the update operation of table data. . After the data update is processed on the server side, new table data will be returned, and the table data can be obtained and updated through xmlhttp.responseText.

Write server-side code

On the server side, we need to write a update.php page to handle the update operation of table data . The code of this page is as follows:

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

Copy after login

This page receives the modified data passed by the client through POST, then updates the data and returns the updated data to the client.

Now, we have completed the process of real-time modification of the entire form. Open the page in the browser, click the modify button, enter the modified data in the pop-up input box, and click the save button to see the effect of the data update.

3. Summary

This article introduces how to realize real-time modification of table data through AJAX technology in PHP and HTML pages. Among them, we use PHP to generate a simple form, use JavaScript to implement real-time modification of the table data, and send the modified data to the server for processing through AJAX. This method can help us operate tabular data more conveniently and quickly. However, it should be noted that in actual development, in order to ensure the security and correctness of data, we need to strictly verify and filter the received data to prevent malicious attacks and data misoperation.

The above is the detailed content of How to realize real-time modification of php html table. For more information, please follow other related articles on the PHP Chinese website!