動態創建jQuery中幾個for循環的表

Question

我想創建一個動態表jQuery中使用我有一些數據對象。

我想實現的是在這個JSFiddle

我有數據

的下列對象，這是用來將數據庫中的數據（fieldMapping）映射到在正確的單元格名稱的例子表

[{ 
    "input_source_type":"input", 
    "field_id":"100786", 
    "field_name":"name", 
    "input_id":{"List Table":"Label 1 ref"}, 
    "input_ref":"Label 1 ref" 
}, 
{ 
    "input_source_type":"input", 
    "field_id":"100787", 
    "field_name":"desc", 
    "input_id":{"List Table":"Label 2 ref"}, 
    "input_ref":"Label 2 ref" 
}, 
{ 
    "input_source_type":"input", 
    "field_id":"100788", 
    "field_name":"desc", 
    "input_id":{"List Table":"Label 3 ref"}, 
    "input_ref":"Label 3 ref" 
}, 
{ 
    "input_source_type":"input", 
    "field_id":"100786", 
    "field_name":"name", 
    "input_id":{"List Table":"Label 4 ref"}, 
    "input_ref":"Label 4 ref" 
}, 
{ 
    "input_source_type":"input", 
    "field_id":"100787", 
    "field_name":"desc", 
    "input_id":{"List Table":"Label 5 ref"}, 
    "input_ref":"Label 5 ref" 
}, 
{ 
    "input_source_type":"input", 
    "field_id":"100788", 
    "field_name":"desc", 
    "input_id":{"List Table":"Label 6 ref"}, 
    "input_ref":"Label 6 ref" 
}] 

這是表數據（字段） - 基本上每行最多可以有2列。以下有陣列的列表，每個陣列是一個行

[ 
    ["Label 1 ref"], 
    ["Label 2 ref","Label 3 ref"], 
    ["Label 4 ref","Label 5 ref"], 
    ["Label 6 ref"] 
] 

每個DataStrucutre從數據庫調用創建，帶有ID和字段一起。這些字段從上面的fieldMapping對象的field_name鍵中鏈接。 這是數據變量，一個基本的例子圖像here

這是我的示例代碼

for (var i in data) 
{ 
    if (row instanceof DataStructure) 
     { 
      for (var i in fields) 
      { 
       var fieldRef = fields[i]; 

       for (var f in this.fieldMapping) 
       { 
        if (this.fieldMapping[f].input_id instanceof Object) 
        { 
         var colspan = 1; 
         if(fieldRef.length == 1) 
          colspan = 2; 

         var fieldName = ''; 
         for (var x in this.fieldMapping[f].input_id) 
         { 
          fieldName = x; 
         } 

         var fName = this.fieldMapping[f].field_name; 
         if (fName == "ID") 
          fName = "id"; 

         var cellValue = row.getValue(fName); 

         if (cellValue instanceof DataVariant) 
         { 
          if(colspan == 1) 
          { 
           if(fieldRef[0] && fieldRef[1]) 
           { 
            html += '<tr>'; 

            for (var r in fieldRef) 
            { 
             if(fieldRef[r] == this.fieldMapping[f].input_id[fieldName]) 
             { 
              html += '<td>'+cellValue.getData()+'</td>'; 
             } 
            } 

            html += '</tr>'; 
           } 

          } 
          else if (colspan == 2) 
          { 
           if (fieldRef == this.fieldMapping[f].input_id[fieldName]) 
           { 
            html += '<tr>'; 
            html += '<td colspan="2">'+cellValue.getData()+'</td>'; 
            html += '</tr>'; 
           } 
          } 
         } 
        } 
       } 
      } 
     } 
    } 
} 

我想獲得高於JSFiddle的結果，但我不斷收到以下（Fiddle2）

<table> 
<tr> 
<td colspan="2">Title info</td> 
</tr> 
<tr> 
</tr> 
<tr> 
<td>This is the main body of the map info window component.</td> 
</tr> 
<tr> 
<td>54.991987, -1.522710</td> 
</tr> 
<tr></tr> 
<tr></tr> 
<tr></tr> 
<tr></tr> 
<tr></tr> 
<tr></tr> 
<tr> 
<td>This is the title for the second map component</td> 
</tr> 
<tr> 
<td>This is the main body of the map info window component.</td> 
</tr> 
<tr></tr> 
<tr> 
<td colspan="2">54.991987, -1.522710</td> 
</tr> 
</table> 

我知道這是因爲我使用的循環量導致了問題。我怎樣才能改變這個讓我達到預期的效果？

在正確的方向的任何幫助或指導，將不勝感激

由於

Answer 1

 1) Table in HTML at runtime using jQuery. The columns, rows and cells will be dynamically created in the Table using jQuery. 

     2) Below is the HTML Markup of the page which consists of an HTML Button to create the dynamic HTML Table and an HTML DIV which will 
     hold the dynamically created table. 



     <input type="button" id = "btnGenerate" value="Generate Table" /> 
     <hr /> 
     <div id="dvTable"> 
     </div> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(function() { 
      $("#btnGenerate").click(function() { 
       //Build an array containing Customer records. 
       var customers = new Array(); 
       customers.push(["Customer Id", "Name", "Country"]); 
       customers.push([1, "John Hammond", "United States"]); 
       customers.push([2, "Mudassar Khan", "India"]); 
       customers.push([3, "Suzanne Mathews", "France"]); 
       customers.push([4, "Robert Schidner", "Russia"]); 

       //Create a HTML Table element. 
       var table = $("<table />"); 
       table[0].border = "1"; 

       //Get the count of columns. 
       var columnCount = customers[0].length; 

       //Add the header row. 
       var row = $(table[0].insertRow(-1)); 
       for (var i = 0; i < columnCount; i++) { 
        var headerCell = $("<th />"); 
        headerCell.html(customers[0][i]); 
        row.append(headerCell); 
       } 

       //Add the data rows. 
       for (var i = 1; i < customers.length; i++) { 
        row = $(table[0].insertRow(-1)); 
        for (var j = 0; j < columnCount; j++) { 
         var cell = $("<td />"); 
         cell.html(customers[i][j]); 
         row.append(cell); 
        } 
       } 

       var dvTable = $("#dvTable"); 
       dvTable.html(""); 
       dvTable.append(table); 
      }); 
     }); 
     </script> 



     (1)First an Array has to be created which will contain the Table Header and Cell values. Then a Table element is created using jQuery. 


     (2)(adding the header row) 

標題行會使用陣列的第一個元素，因爲它包含的標題列文本值來構建。 首先將一行插入表中，然後使用循環執行的列數並逐個創建Table TH元素並使用jQuery將其附加到標題行。

 (3)(Table insertRow Method) 

此方法將新行添加到指定索引處的表中。如果索引以-1提供，則該行將被添加到最後一個位置。

 (4) (Adding the Data Rows) 

循環在數組元素上一個接一個地執行在HTML表中創建一行。然後，每行內的動態電池元件被創建並使用通過附加它使用jQuery

 note:-You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place.[enter image description here][1]