PHP에서 js에 의해 동적으로 추가된 테이블 데이터를 출력하는 방법

인터넷 기술의 발전으로 프론트엔드 기술은 점점 더 성숙해졌고, 웹 페이지에서는 거의 항상 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가 포함되어 있습니다. 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. PHP에서 JavaScript 코드 출력🎜🎜PHP에서 테이블 데이터를 유지하려면 데이터를 프런트 엔드에서 사용하기 전에 JavaScript 개체로 변환해야 합니다. PHP 함수 json_encode()를 사용하여 데이터를 프런트 엔드로 전송할 수 있는 JSON 문자열로 변환할 수 있습니다. 🎜rrreee🎜PHP를 사용하여 JavaScript 키-값 쌍을 출력하여 동적 테이블 데이터 추가를 달성하고 JSON 데이터를 JS로 출력한 다음 JS를 사용하여 이를 HTML 구조로 변환하고 테이블에 동적으로 추가하여 배열에서 프로세스를 완료합니다. 전체 과정을 표로 작성합니다. 🎜🎜4. 요약🎜🎜JavaScript에 의해 PHP를 통해 동적으로 추가된 테이블 데이터를 출력하면 데이터 상호 작용 및 처리를 더 잘 실현할 수 있습니다. 여기서는 PHP의 json_encode() 함수를 사용하여 PHP 배열을 변환합니다. 프런트 엔드에 테이블 데이터의 동적 추가를 구현하기 위해 JavaScript 개체로 변환합니다. 이 방법을 사용하면 데이터 표시 및 처리를 더욱 효과적으로 실현하고 웹사이트의 상호작용성과 사용자 경험을 향상할 수 있습니다. 🎜

위 내용은 PHP에서 js에 의해 동적으로 추가된 테이블 데이터를 출력하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!