我正在尝试使用我拥有的一些数据对象在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>
我知道这是因为我使用的循环量导致了这个问题。如何更改此项以使我获得所需的结果？
非常感谢任何正确方向的帮助或指导
由于
答案 0 :(得分：0)
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)
Header Row将使用Array的第一个元素构建，因为它包含Header列文本值。 首先将一行插入表中，然后使用列数执行循环，并创建一个一个Table TH元素并使用jQuery附加到标题行。
(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]