我试图通过传递一个包含23个对象的数组和一个包含每行列数的数组来动态构建表。 （我认为这部分是我没有的权利）。每行具有不同的列数，最大列数为3.
我不确定我的代码是否正在执行我需要它做的事情，也就是说它不计算哪个行和单元格应该写入数据。
输出应该是（标签和值在同一个单元格内） desired output of table：
包含每行列数的数组：
columns: Array[19]
0: 2
1: 1
2: 3
3: 2
4: 2
5: 1
6: 1
7: 1
8: 1
9: 1
10: 1
11: 1
12: 1
13: 1
14: 1
15: 1
16: 1
17: 1
18: 1
length: 19
对象数组和包含的数据具有以下格式：
recordSets: Array[1]
0: Object
records:
0: Object
html: "<input id="txtCompanyName" name="CompanyName" value="Company" />"
info: "Bank"
label: "Profile:"
name: "Name"
type: "HtmlInputText"
1: Object
html: "<input id="txtTier" name="Tier" value="Tier 1" />"
info: "Tier 1"
label: "Tier:"
name: "Tier"
type: "HtmlInputText"
2: Object
html: "<textarea id="taCompanyDescription" name="CompanyDescription" value="Our goal is to make life simple"></textarea>"
info: "Our goal is to make life simple"
label: "Description:"
name: "CompanyDescription"
type: "HtmlTextArea"
3: Object
html: "<input id="txtMeetingDate" name="MeetingDate" class="datepicker_ref popup" ng-model="MeetingDate" value="2015-12-27T00:00:00" />"
info: "2015-12-27T00:00:00"
label: "Date:"
name: "MeetingDate"
type: "HtmlInputText"
4: Object
html: "<input id="txtMeetingTime" name="MeetingTime" value="01:00:00" ng-model="MeetingTime" />"
info: "01:00:00"
label: "Time:"
name: "MeetingTime"
type: "HtmlInputText"
5: Object
html: "<input id="txtLocation" name="Location" value="City View" />"
info: "City View"
label: "Location:"
name: "MeetingLocation"
type: "HtmlInputText"
6: Object
html: "<input id="txtAtendeeName" name="AtendeeName" value="Name" />"
info: "Name"
label: "Attendee Name"
name: "AttendeeName"
type: "HtmlInputText"
7: Object
html: "<input id="txtAtendeeRole" name="AtendeeName" value="Role" />"
info: "Role"
label: "Attendee Role"
name: "AttendeeRole"
type: "HtmlInputText"
8: Object
html: "<select name="ABAttendeeName" id="ddlABAttendeeName"></select>"
info: "Luke Fuss"
label: "AB Attendee Name"
name: "ABAttendeeName"
type: "HtmlSelect"
9: Object
html: "<select name="ABAttendeeRole" id="ddlABAttendeeRole"></select>"
info: "New Role"
label: "AB Attendee Role"
name: "ABAttendeeRole"
type: "HtmlSelect"
10: Object
html: "<input id="txtSection1Question1" name="Section1Question1" value="Goal" />"
info: "Goal"
label: "1) Primary goal?"
name: "Section1Question1"
type: "HtmlInputText"
11: Object
html: "<input id="txtSection1Question2" name="Section1Question2" value="Update" />"
info: "Update"
label: "2) Updated financials?"
name: "Section1Question2"
type: "HtmlInputText"
12: Object
html: "<input id="txtSection1Question3" name="Section1Question3" value="Other Docs" />"
info: "Other Docs"
label: "3) Other documents to bring"
name: "Section1Question3"
type: "HtmlInputText"
13: Object
html: "<input id="txtSection1Question4" name="Section1Question4" value="Discuss" />"
info: "Discuss"
label: "4) Specific products to discuss:"
name: "Section1Question4"
type: "HtmlInputText"
14: Object
html: "<input id="txtSection1Question5" name="Section1Question5" value="Key/ New Deal" />"
info: "Key/ New Deal"
label: "5) Key competitor(s) if a renewal or if new deal:"
name: "Section1Question5"
type: "HtmlInputText"
15: Object
html: "<input id="txtSection2Question1" name="Section2Question1" value="Top 3" />"
info: "Top 3"
label: "What are the top 3 initiatives for the company over the next 6-24 months?"
name: "Section2Question1"
type: "HtmlInputText"
16: Object
html: "<input id="txtSection2Question2" name="Section2Question2" value="Trends" />"
info: "Trends"
label: "What trends are affecting your business? What keeps you up at night?"
name: "Section2Question2"
type: "HtmlInputText"
17: Object
html: "<input id="txtSection2Question3" name="Section2Question3" value="Relationship" />"
info: "Relationship"
label: "What is important to company in a banking relationship?"
name: "Section2Question3"
type: "HtmlInputText"
18: Object
html: "<input id="txtSection2Question4" name="Section2Question4" value="Management Roles" />"
info: "Management Roles"
label: "What are key roles and structure of the management team?"
name: "Section2Question4"
type: "HtmlInputText"
19: Object
html: "<input id="txtSection2Question5" name="Section2Question5" value="Purchasing Plans" />"
info: "Purchasing Plans"
label: "Does the company have plans to purchase real estate or equipment in the next two years?"
name: "Section2Question5"
type: "HtmlInputText"
20: Object
html: "<input id="txtSection2Question6" name="Section2Question6" value="Staff Changed" />"
info: "Staff Changed"
label: "Any changes in staffing planned?"
name: "Section2Question6"
type: "HtmlInputText"
21: Object
html: "<input id="txtSection2Question7" name="Section2Question7" value="Not Bank" />"
info: "Not Bank"
label: "Any changes with Advisor or other non AB products?"
name: "Section2Question7"
type: "HtmlInputText"
22: Object
html: "<input id="txtSection2Question8" name="Section2Question8" value="Other" />"
info: "Other"
label: "Other"
name: "Section2Question8"
type: "HtmlInputText"
我正在使用的功能：
function DynamicTableBuilder(columns, data) {
if (!columns || !data) {
return;
}
var table = '<table><tbody><tr>';
var max = Math.max.apply(Math, columns);
for (var index = 0, length = data.length; index < length; index++) {
for (var j = 0, l = columns.length; j < l; j++) {
if (columns[j] === max) {
table += '<td>';
}
else {
table += '<td colspan="' + (max / columns[j]) + '">';
}
table += data[index].records[j].label + ': ' + data[index].records[j].info + '</td>'
}
}
table += '</tr></tbody></table>';
return table;
};
答案 0 :(得分：0)
你可以尝试这样的事情。
//JS Functions to get Row string with desired col with col spans
function createColWithSpanOne(Obj)
{
return '<td colspan="1">'+ Obj.label + Obj.html + '</td>';
}
function createColWithSpanTwo(Obj)
{
return '<td colspan="2">'+ Obj.label + Obj.html + '</td>';
}
function createColWithSpanThree(Obj)
{
return '<td colspan="3">'+ Obj.label + Obj.html + '</td>';
}
var countRows = 0;
var countObj = 0;
var rowString = '';
var obj;
for(var row = 0; row < ArrayForColSpans.legnth; row++)
{
if(ArrayForColSpans[row]==1)
{
rowString = rowString + '<tr>' ;
obj = ArrayForObj[countObj];
rowString = rowString + createColWithSpanThree(obj) + '</tr>';
countObj++;
}
else if(ArrayForColSpans[row]==2)
{
rowString = rowString + '<tr>' ;
obj = ArrayForObj[countObj];
rowString = rowString + createColWithSpanTwo(obj);
countObj++;
obj = ArrayForObj[countObj];
rowString = rowString + createColWithSpanOne(obj) + '</tr>';
countObj++;
}
if(ArrayForColSpans[row]==3)
{
rowString = rowString + '<tr>' ;
obj = ArrayForObj[countObj];
rowString = rowString + createColWithSpanOne(obj) ;
countObj++;
obj = ArrayForObj[countObj];
rowString = rowString + createColWithSpanOne(obj);
countObj++;
obj = ArrayForObj[countObj];
rowString = rowString + createColWithSpanOne(obj) + '</tr>';
countObj++;
}
}
//JQuery call
$("#dynamicTable").append(rowString);
//HTML Just create an empty table with ID dynamicTable.
我没有对它进行过测试，如果它适用于您或有问题，它仅供参考lmk。您可以进一步改进逻辑，以将值从对象数组填充到列元素中。
除非所有组件都是动态的，包括表的布局，否则我不会继续使用动态表。如果Form结构长时间保持静态，最好先创建它并动态填充值。我的2美分。