如何在動態加載的DIV中填充html表格

Question

我在HTML頁面中有一個DIV容器，我使用jquery.load（）函數動態加載其他HTML頁面。在其中一個頁面上，我需要在該頁面加載之前/之前從數據庫填充表格。我該如何調用一個在該頁面加載DIV之後執行的JavaScript函數。

這是動態加載的 「headquarters.html」 頁：

<div class="row"> 
    <div class="col-md-10" > 
     <table class="table table-bordered table-hover" id="tbl_hqlist"> 
       <tr> 
        <th> HQ Code</th> 
        <th> Headquarter Name</th> 
       </tr> 
     </table> 
    </div> 
</div> 

我使用jquery.load（）函數類似下面加載該頁面：

function fn_headquarters(){ 
    $('#bodyContent').load("../html/headquarters.html"); 
    headquarterManagement(); 
    return; 
} 

function headquarterManagement(){ 
     $.ajax({ 
      url:"../bin/manage_hq.php", 
      data:{ 'procAction': 1}, 
      method: 'POST', 
      dataType: 'JSON', 
      success: function(proc_msg){ 

     // get data and populate the table using jquery.each() & jquery.append() functions 

      }, 
      error: function(xhr){ 
       console.log(xhr.responseText); 
      } 
     }) 
     return; 
} 

此代碼更新失敗「tbl_hqlist」。

Answer 1

jQuery load()使用AJAX，因此是異步的，幸運的是，它提供了一個回調參數。像這樣調整...

function fn_headquarters(){ 
    $('#bodyContent').load("../html/headquarters.html", function(){ 
     headquarterManagement(); 
    }); 
    return; 
} 

通過這樣做，您將在填充它之前確保該元素實際存在。 ？

---

獎勵：這將從JSON數據創建表格標記：

function makeTableFromArray(arrayOfData){ 
    var html_buffer = []; 
    html_buffer.push("<table><thead><tr>"); 
    var headerData = arrayOfData[0]; 
    for(var p in headerData) 
     if(headerData.hasOwnProperty(p)) 
      html_buffer.push("<th>"+p+"</th>"); 
    html_buffer.push("</tr></thead><tbody>"); 
    for(var i=0; i<arrayOfData.length; i++){ 
     html_buffer.push("<tr>"); 
     for(var p in arrayOfData[i]) 
      if(arrayOfData[i].hasOwnProperty(p)) 
       html_buffer.push("<td>"+arrayOfData[i][p]+"</td>"); 
     html_buffer.push("</tr>"); 
    } 
    html_buffer.push("</table>"); 
    return html_buffer.join(""); 
} 

https://jsfiddle.net/sbctwdLc/