2017-06-09 35 views
-1

我想動態創建html表和表的數量將取決於我在數組中獲得的響應。新的表格應該在每6個元素之後創建,表格標題本身就是數組元素。 預期輸出是 -我們可以動態創建多個HTML表使用for循環jquery

------------------------------------- 
| th1 | th2 | th3 | th4 | th5 | th6 | 
------------------------------------- 
|  |  |  |  |  |  | 
------------------------------------- 

代碼,用於產生表是如下,其中控制檯被正確打印,但元件沒有獲得創建並沒有得到任何錯誤太。

'<div id="findingDiv">'; 

    for(var i=0;i<tables;i++){ 
     console.log('i-',i);        
     '<table class="table table-bordered" style="margin-top: 10px; border:1px solid black; border-collapse : collapse;font-size: 30px;">'+ 
      '<thead>'+ 
       '<tr>'; 

       for(var k=0;k<6;k++){ 

        '<th id="header" style="color:black; font-size: 12px; border:1px solid black; text-align:center;border-color: rgb(166, 166, 166);"> historyTable[k] </th>'; 
        console.log('k-',k); 
       } 

     '</table> \n';        
    } 

有人能幫助我嗎?

我檢查了以前沒有用過的解決方案。 How to clone() a element n times? How to use loop in Jquery to add table multiple times into div Create a table dynamically using for loop in .html()

+0

[如何使用jQuery動態添加表單元素](https://stackoverflow.com/questions/16744594/how-to-use-jquery-to-add-form-elements-dynamically) – Saksham

回答

0

您可以使用jQuery .append()方法HTML表添加到您的DIV dynamicaly在for循環。

Working fiddle

您可以使用下面的代碼。

下面DIV在HTML:

<div id="findingDiv"> 
</div> 

代碼jQuery中。我用jQuery的.ready()方法在網頁加載創建:

$(document).ready(function() { 
    var tables = ['th1','th2','th3','th4','th5','th6'] 

    for(var i=0;i<tables.length;i++){ 
    var content = "<table><thead><tr>"; 
     for(var k=0;k<6;k++) 
     { 
      content += '<th id="header" style="color:black; font-size: 12px; border:1px solid black; text-align:center;border-color: rgb(166, 166, 166);">'+tables[k]+' </th>';      
     } 
     content += "</tr></thead></table><br/>"; 
     $('#findingDiv').append(content); 
    } 
}); 

我剛添加的th,同樣的方法可以添加tr爲好。

+0

是thnx ..但它正在工作,當div發現DIV在html代碼中定義。我無法在html中創建div我需要在click事件上動態創建它。在這種情況下,這是行不通的。 –

+0

那麼,在這種情況下,你可以在jquery中創建DIV。但是你需要在任何元素上使用.append(內容),可能是一個body。因爲你不能直接將元素注入DOM。 –

相關問題