Bagaimana untuk merealisasikan pengubahsuaian masa nyata jadual php html-masalah PHP-php.cn

Bagaimana untuk merealisasikan pengubahsuaian masa nyata jadual php html

PHPz

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

asal

1332 orang telah melayarinya

Dalam pembangunan web, jadual ialah elemen yang sangat biasa digunakan. Dalam jadual, kita selalunya perlu mengubah suai data di dalamnya. Cara biasa ialah mengemas kini data melalui pemprosesan bahagian belakang. Tetapi jika kita mahu mengubah suai data jadual secara langsung dalam masa nyata di bahagian hadapan, bagaimana untuk mencapainya? Artikel ini akan memperkenalkan cara untuk merealisasikan pengubahsuaian masa nyata data jadual melalui teknologi AJAX dalam halaman PHP dan HTML.

1. Gambaran Keseluruhan

Dalam artikel ini, kami akan menggambarkannya melalui contoh pengubahsuaian masa nyata bagi bentuk mudah. Pertama, kita perlu menjana borang menggunakan kod PHP. Seperti yang ditunjukkan di bawah:

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

Salin selepas log masuk

Kod di atas menjana jadual ringkas yang mengandungi maklumat nama, jantina dan umur empat orang. Dalam PHP, kita boleh menggunakan tatasusunan untuk mewakili data dalam jadual.

2. Ubah suai data jadual dalam masa nyata

Sekarang, apa yang ingin kami capai ialah mengubah suai data dalam jadual dalam masa nyata. Kita boleh mencapainya melalui langkah berikut:

Tambah butang ubah suai pada jadual.

Dalam lajur terakhir data dalam setiap baris, tambahkan butang untuk mengubah suai data dalam baris itu. Gunakan kod berikut:

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

Salin selepas log masuk

Fungsi JavaScript editRow digunakan di sini untuk dipanggil apabila butang edit diklik.

Tulis fungsi JavaScript editRow.

Tambahkan kod JavaScript berikut pada halaman HTML:

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

Salin selepas log masuk

Fungsi editRow ditakrifkan di sini Apabila butang ubah suai diklik, fungsi tersebut akan menukar data baris semasa Dipaparkan sebagai borang untuk kemudahan pengguna.

Tulis fungsi JavaScript saveChanges.

Selepas memasukkan data dalam borang, kami perlu menghantar data yang diubah suai ke pelayan melalui teknologi AJAX dan mengemas kini borang. Sekarang, kita perlu menulis fungsi JavaScript saveChanges yang akan menyimpan data yang diubah suai. Fungsi ini menggunakan kod berikut:

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

Salin selepas log masuk

Fungsi ini menghantar permintaan POST ke halaman XMLHttpRequest pelayan melalui objek update.php untuk mengendalikan operasi kemas kini data jadual. Selepas kemas kini data diproses di bahagian pelayan, data jadual baharu akan dikembalikan dan data jadual boleh diperoleh dan dikemas kini melalui xmlhttp.responseText.

Tulis kod bahagian pelayan

Di bahagian pelayan, kita perlu menulis halaman update.php untuk mengendalikan operasi kemas kini data jadual. Kod halaman ini adalah seperti berikut:

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

Salin selepas log masuk

Halaman ini menerima data diubah suai yang dihantar oleh pelanggan melalui POST, kemudian mengemas kini data dan mengembalikan data yang dikemas kini kepada pelanggan.

Kini, kami telah menyelesaikan proses pengubahsuaian masa nyata bagi keseluruhan borang. Buka halaman dalam penyemak imbas, klik butang ubah suai, masukkan data yang diubah suai dalam kotak input pop timbul, dan klik butang simpan untuk melihat kesan kemas kini data.

3. Ringkasan

Artikel ini memperkenalkan cara untuk merealisasikan pengubahsuaian masa nyata data jadual melalui teknologi AJAX dalam halaman PHP dan HTML. Antaranya, kami menggunakan PHP untuk menjana jadual ringkas, menggunakan JavaScript untuk melaksanakan pengubahsuaian masa nyata data jadual, dan menghantar data yang diubah suai kepada pelayan untuk diproses melalui AJAX. Kaedah ini boleh membantu kami mengendalikan data jadual dengan lebih mudah dan cepat. Walau bagaimanapun, perlu diingatkan bahawa dalam pembangunan sebenar, untuk memastikan keselamatan dan ketepatan data, kami perlu mengesahkan dan menapis data yang diterima dengan ketat untuk mengelakkan serangan berniat jahat dan salah operasi data.

Atas ialah kandungan terperinci Bagaimana untuk merealisasikan pengubahsuaian masa nyata jadual php html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!