How to output table data dynamically added by js in php

With the development of Internet technology, front-end technology has become more and more mature, and Javascript is almost always used in web pages. In some data processing situations, JavaScript is often combined with the back-end PHP language to achieve dynamic transmission and output of data.

The following is a common situation, that is, PHP outputs tabular data dynamically added by JavaScript.

1. Data source

First, we need some data to display in the table. Here is a simple array as an example:

$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. Output table

Next, we need to create an HTML table, and the program will dynamically add the data in the array to the table.

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

The structure of the table includes a thead to place the table header, and a tbody to dynamically add table data.

3. Output JavaScript code in PHP

To maintain table data in PHP, the data needs to be converted into JavaScript objects before it can be used in the front end. We can use the PHP function json_encode() to convert the data into a JSON string, which can be transmitted to the front end.

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

Use PHP to output JavaScript key-value pairs to achieve dynamic table data addition, output JSON data to JS, and then use JS to convert it into an HTML structure and dynamically add it to the table. That's it. The whole process from array to table.

4. Summary

Outputting dynamically added table data through JavaScript through PHP allows us to better realize data interaction and processing. Here we use json_encode() in PHP The function converts PHP arrays into JavaScript objects to implement dynamic addition of table data in the front end. Using this method can better realize the display and processing of data, and improve the interactivity and user experience of the website.

The above is the detailed content of How to output table data dynamically added by js in php. For more information, please follow other related articles on the PHP Chinese website!