如何使用從PHP返回的數據來構建HTML表？

Question

我有一個php文件，可以訪問並觸摸mongo db並構建一堆表標簽。 當我將下面的腳本標簽代碼替換為php代碼時，它可以正常工作並建立表格。

當我嘗試從被調用頁面獲取php結果時，我設法將表文本輸入到data變量中……如果發出警報，我會看到從.php頁面生成的所有表標記和數據...但是我不確定如何在th標記之后直接將代碼內嵌在HTML中...如果我在腳本中執行document.write（data），似乎只用從中生成的數據覆蓋整個頁面.php頁面...它不會在第th行之后追加。 預先感謝您的任何建議。

            <table class="table table-striped table-hover">

                 <tr>
                    <th>Agency</th>
                    <th>POC</th> 
                    <th>POC Phone</th>
                    <th>Address</th>
                 </tr>          

                 <script>
                    var data_from_ajax;
                    $.get('build-agency-table.php', function(data) {
                      data_from_ajax = data;
                      alert(data);
                    });
                </script>

            </table>

這是由PHP腳本返回

<tr><td>BACODA</td><td>Kristi Smith</td><td>211.444.2222</td>

Answer 1

我認為腳本標簽屬於表之外。 使用tbody thead可以幫助您區分靜態（標題）和動態（來自ajax）內容。

 <table>
        <thead>
        <tr>
            <th>Agency</th>
            <th>POC</th> 
            <th>POC Phone</th>
            <th>Address</th>
        </tr> 
        </thead>
        <tbody id="to_fill">

        </tbody>
 </table>


<script>
       var data_from_ajax;
       $.get('build-agency-table.php', function(data) {
         data_from_ajax = data;
         $("#to_fill").html(data_from_ajax);
       });
</script>

Answer 2

嘗試這個

        <table class="table table-striped table-hover">

             <tr>
                <th>Agency</th>
                <th>POC</th> 
                <th>POC Phone</th>
                <th>Address</th>
             </tr>  

             <tbody id="tablebody"></tbody>

             <script>
                var data_from_ajax;
                $.get('build-agency-table.php', function(data) {
                  data_from_ajax = data;
                  $('#tablebody').html(data);
                  alert(data);
                });
            </script>

        </table>

Answer 3

您需要使用javascript將html內容添加到容器中。

<table>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
    <tr id="myRow"></tr>
</table>

<script>       
    $.get('build-agency-table.php', function(data) {
      $("#myRow").html(data); //Add the html content into "myRow"  
    });
</script>