在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)  

标题行将使用数组的第一个元素构建，因为它包含标题列文本值。 首先将一行插入到表中，然后使用列数执行循环，并使用 jQuery 逐个创建表 TH 元素并将其附加到标题行。

      (3)(Table insertRow Method) 

此方法在指定索引处向表中添加新行。如果索引提供为 -1，则该行将添加到最后一个位置。

      (4) (Adding the Data Rows)

在数组元素上执行循环，并在 HTML 表中一一创建行。然后在每一行内部创建一个动态单元格元素并使用 jQuery 追加

      (5) (Adding the dynamic Table to the Page)

最后，动态创建的表格通过使用 jQuery 将 HTML DIV 附加到页面中

      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]