Bagaimana untuk mengeluarkan data jadual ditambah secara dinamik oleh js dalam php

Dengan perkembangan teknologi Internet, teknologi bahagian hadapan telah menjadi semakin matang, dan Javascript hampir selalu digunakan dalam halaman web. Dalam sesetengah situasi pemprosesan data, JavaScript sering digabungkan dengan bahasa PHP bahagian belakang untuk mencapai penghantaran dinamik dan output data.

Berikut ialah situasi biasa, iaitu, PHP mengeluarkan data jadual yang ditambah secara dinamik oleh JavaScript.

1. Sumber data

Pertama, kami memerlukan beberapa data untuk dipaparkan dalam jadual Berikut ialah tatasusunan ringkas sebagai contoh:

$data = array(
    array('id'=>1, 'name'=>'张三', 'age'=>20),
    array('id'=>2, 'name'=>'李四', 'age'=>22),
    array('id'=>3, 'name'=>'王五', 'age'=>23),
    array('id'=>4, 'name'=>'赵六', 'age'=>25),
    array('id'=>5, 'name'=>'钱七', 'age'=>26)
);

2

Seterusnya, kita perlu mencipta jadual HTML, dan atur cara akan menambahkan data dalam tatasusunan secara dinamik ke jadual.

<table id="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Struktur jadual termasuk thead untuk meletakkan pengepala jadual dan tbody untuk menambah data jadual secara dinamik.

3. Output kod JavaScript dalam PHP

Untuk mengekalkan data jadual dalam PHP, data perlu ditukar kepada objek JavaScript sebelum ia boleh digunakan di bahagian hadapan. Kita boleh menggunakan fungsi PHP json_encode() untuk menukar data menjadi rentetan JSON, yang boleh dihantar ke bahagian hadapan.

<script type="text/javascript">
    var data = <?php echo json_encode($data); ?>;  // 从 PHP 中输出 JavaScript 数据
    var table = document.getElementById('table');
    var tbody = table.getElementsByTagName('tbody')[0];
    for (var i = 0; i < data.length; i++) {
        var tr = document.createElement(&#39;tr&#39;);
        var td1 = document.createElement(&#39;td&#39;);
        td1.innerHTML = data[i][&#39;id&#39;];
        var td2 = document.createElement(&#39;td&#39;);
        td2.innerHTML = data[i][&#39;name&#39;];
        var td3 = document.createElement(&#39;td&#39;);
        td3.innerHTML = data[i][&#39;age&#39;];
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tbody.appendChild(tr);
    }
</script>

Gunakan PHP untuk mengeluarkan pasangan nilai kunci JavaScript untuk mencapai penambahan data jadual dinamik, keluarkan data JSON kepada JS dan kemudian gunakan JS untuk menukarnya kepada struktur HTML dan menambahkannya secara dinamik pada jadual, supaya Menyelesaikan keseluruhan proses dari tatasusunan ke jadual.

4. Ringkasan

Menghasilkan data jadual yang ditambah secara dinamik melalui JavaScript melalui PHP membolehkan kami merealisasikan interaksi dan pemprosesan data dengan lebih baik Di sini kami menggunakan fungsi json_encode() dalam PHP kepada Tatasusunan ditukar menjadi objek JavaScript untuk melaksanakan penambahan dinamik data jadual di bahagian hadapan. Menggunakan kaedah ini boleh merealisasikan paparan dan pemprosesan data dengan lebih baik, dan meningkatkan interaktiviti dan pengalaman pengguna tapak web.

Atas ialah kandungan terperinci Bagaimana untuk mengeluarkan data jadual ditambah secara dinamik oleh js dalam php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!