Comment générer des données de table ajoutées dynamiquement par js en php

Avec le développement de la technologie Internet, la technologie front-end est devenue de plus en plus mature et Javascript est presque toujours utilisé dans les pages Web. Dans certaines situations de traitement de données, JavaScript est souvent combiné avec le langage PHP principal pour obtenir une transmission et une sortie dynamiques des données.

Ce qui suit est une situation courante, c'est-à-dire que PHP génère des données tabulaires ajoutées dynamiquement par JavaScript.

1. Source de données

Tout d'abord, nous avons besoin de certaines données à afficher dans le tableau Voici un tableau simple à titre d'exemple :

$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. Table de sortie

Ensuite, nous devons créer un tableau HTML, programmer The. les données du tableau seront ajoutées dynamiquement à la table.

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

La structure du tableau comprend un thead pour placer l'en-tête du tableau et un tbody pour ajouter dynamiquement des données au tableau. thead 放置表头，一个 tbody 用于动态添加表格数据。

三、PHP 中输出 JavaScript 代码

在 PHP 中维护表格数据，需要将数据转换为 JavaScript 对象才能在前端中使用。我们可以采用 PHP 函数 json_encode() 将数据转为 JSON 字符串，即可传输到前端。

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

通过 PHP 输出 JavaScript 键值对来实现动态的表格数据增加，将 JSON 数据输出到 JS 中，然后使用 JS 将其转换为 HTML 结构并动态添加至表格中，这样就完成了从数组到表格的整个过程。

四、总结

通过 PHP 输出 JavaScript 动态增加的表格数据可以让我们更好地实现数据的交互和处理，这里我们借助了 PHP 中的 json_encode()

3. Générer du code JavaScript en PHP🎜🎜Pour conserver les données de table en PHP, les données doivent être converties en objets JavaScript avant de pouvoir être utilisées dans le front-end. Nous pouvons utiliser la fonction PHP json_encode() pour convertir les données en une chaîne JSON, qui peut être transmise au front-end. 🎜rrreee🎜Utilisez PHP pour générer des paires clé-valeur JavaScript afin d'obtenir un ajout dynamique de données de table, de générer des données JSON vers JS, puis d'utiliser JS pour les convertir en une structure HTML et les ajouter dynamiquement à la table, complétant ainsi le processus à partir du tableau de déposer tout le processus. 🎜🎜4. Résumé🎜🎜La sortie des données de table ajoutées dynamiquement par JavaScript via PHP nous permet de mieux réaliser l'interaction et le traitement des données. Ici, nous utilisons la fonction json_encode() en PHP pour convertir le tableau PHP. dans un objet JavaScript et implémentez l'ajout dynamique de données de table dans le front-end. L'utilisation de cette méthode permet de mieux réaliser l'affichage et le traitement des données, et d'améliorer l'interactivité et l'expérience utilisateur du site Web. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!