PHPでjsで動的に追加したテーブルデータを出力する方法

インターネット技術の発展に伴い、フロントエンド技術はますます成熟しており、Web ページでは Javascript がほぼ常に使用されています。データ処理の状況によっては、JavaScript をバックエンドの PHP 言語と組み合わせて、データの動的な送信と出力を実現することがよくあります。

以下は一般的な状況です。つまり、PHP は JavaScript によって動的に追加された表形式のデータを出力します。

1. データ ソース

まず、テーブルに表示するデータが必要です。例として単純な配列を示します:

$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. 出力テーブル

次に、HTML テーブルを作成する必要があります。プログラムは配列内のデータをテーブルに動的に追加します。

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

テーブルの構造には、テーブル ヘッダーを配置する thead とテーブル データを動的に追加する tbody が含まれています。

3. 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 構造に変換してテーブルに動的に追加します。 . 配列からテーブルまでのプロセス全体。

4. 概要

JavaScript 経由で動的に追加されたテーブル データを PHP 経由で出力することで、データの対話と処理をより適切に実現できます。ここでは、PHP の json_encode() を使用します。 PHP 配列を JavaScript オブジェクトに変換し、フロントエンドでテーブル データの動的な追加を実装します。この方法を使用すると、データの表示と処理がより適切に実現され、Web サイトの対話性とユーザー エクスペリエンスが向上します。

以上がPHPでjsで動的に追加したテーブルデータを出力する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。