JavaScript: build html table dynamically having rows with different number of columns

Question

I am trying to build a table dynamically by passing an array of 23 objects, and an array containing the number of columns per row. (I think this part is what I do not have right). Each row has different number of columns, and the largest number of columns is 3.

I am not sure my code is doing what I need it to do, that is it is not calculating which row and cell should write the data.

The output should be like (labels and values are going inside the same cell) desired output of table:

The array containing the number of columns per row:

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

The array of objects and the contained data have this format:

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"

The function I am working with:

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;

};

What's wrong with your current function's output? How are colspans supposed to be handled when there are fewer than 3? — Kristján
– Kristján, Commented Dec 24, 2015 at 19:35
is this form going to be dynamic in future as well? I mean the number of columns requirement. Or is it something you are trying to learn ? — pratikpawar
– pratikpawar, Commented Dec 24, 2015 at 19:42
Is that array of objects (records[1]) just one element of array of colspans (columns[19])? as in multidimensional array? — zer00ne
– zer00ne, Commented Dec 24, 2015 at 19:42
@zer00ne Array[1] represent all the elements to be represented on table. Each Object from [Array[1]] is one element in <TD> and OP is trying to dynamically put these elements in table of different colspans which is coming from Array[19]. — pratikpawar
– pratikpawar, Commented Dec 24, 2015 at 19:46

pratikpawar · Accepted Answer · 2015-12-24 20:23:40Z

You could try something like this.

//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.

I have not tested it and it is just for reference lmk if it works for you or have an issues. You could further improve the logic to populate values from array of objects into column elements.

I wouldn't go ahead with dynamic table for such unless all components are dynamic including layout of table. if Form structure is going to be static for long time it is better to create it upfront and populate values dynamically. Just my 2 cents.

Collectives™ on Stack Overflow

JavaScript: build html table dynamically having rows with different number of columns

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related