如何在动态加载的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/