Create a dynamic table with adding column and row that depends on data in JQuery or JavaScript

Question

I have a table that I wish to make it more dynamic. How to change this code into dynamic table like for example.

Example for Current Version and Revision Date column.

If the Current Version and Revision Date th have a data it will create another column to make it 3 or 4 and so on Current Version and Revision Date column.

Example for Remarks column.

If the Remarks column have a data add another column inside Remarks column which is 1st, 2nd, 3rd, 4th ... and so on.

Please see the sample output below.

<table border="2" style="width:100%;">
            <thead>
                <tr>
                    <th rowspan="2">ID</th>
                    <th rowspan="2">Document Name</th>
                    <th rowspan="2">Document ID</th>
                    <th>Current Version</th>
                    <th>Current Version</th>
                    <th colspan="2">Remarks</th>
                    <th rowspan="2">Signature</th>
                </tr>
                <tr>

                    <th>Revision Date</th>
                    <th>Revision Date</th>
                    <th rowspan="2">1st</th>
                    <th rowspan="2">2nd</th>
                </tr>
            </thead>
            <tbody id="resultAppend">

            </tbody>
        </table>





 <script>


var APIData = [{ Section_No: '4.1',
                           Document_Title: 'Sample Document Title',
                           Document_ID: 'QM-CI-001',
                           Revisions: [ { No: '01', 
                                          Approval_Date:'8/23/2017' },
                                        { No: '02', 
                                          Approval_Date: '3/12/2018' }, 
                                       ], 
                           remarks: [ 'OK', 'OK' ],
                           Signature: 'Signature' }];


        var trData = '';


        for (var i = 0; i < APIData.length; i++) {
            var obj = APIData[i];

            trData += '<tr >' +
                '<td rowspan="2">' + obj.Section_No + '</td>' +
                '<td rowspan="2">' + obj.Document_Title + '</td>' +
                '<td rowspan="2">' + obj.Document_ID + '</td>' +
                '<td>' + obj.Revision_No + '</td>' +
                '<td>' + obj.Revision_No + '</td>' +
                '<td rowspan="2">' + obj.remarks1 + '</td>' +
                '<td rowspan="2">' + obj.remarks2 + '</td>' +
                '<td rowspan="2">' + obj.Signature + '</td>' +
                '</tr><tr>' +
                '<td>' + obj.Approval_Date + '</td>' +
                '<td>' + obj.Approval_Date + '</td>' +
                '</tr>';

        }



        document.querySelector('#resultAppend').innerHTML = trData;
    </script>

Sample Output

Answer 1

I would suggest you using the JsViews package - it will fit to your task very well.

I have prepared an example using your sample data, extended for 2 rows: jsfiddle

Here is jsViews/jsRender template code:

<table border="1" style="width:100%;">
    <thead>
        <tr>
            <th rowspan="2">ID</th>
            <th rowspan="2">Document Name</th>
            <th rowspan="2">Document ID</th>
            {{for ~makeArray(maxVersions)}}
            <th>Current Version</th>
            {{/for}}
            <th colspan="{{:maxRemarks}}">Remarks</th>
            <th rowspan="2">Signature</th>
        </tr>
        <tr>
            {{for ~makeArray(maxVersions)}}
            <th>Revision Date</th>
            {{/for}}
            {{for ~makeArray(maxRemarks)}}
            <th rowspan="2">{{:~getNumberWithOrdinal(#index+1)}}</th>
            {{/for}}
        </tr>
    </thead>
    <tbody id="resultAppend">
    {{for rows ~maxVersions = maxVersions ~maxRemarks = maxRemarks}}
        <tr>
            <td rowspan="2">{{:Section_No}}</td>
            <td rowspan="2">{{:Document_Title}}</td>
            <td rowspan="2">{{:Document_ID}}</td>
            {{for Revisions}}
            <td>{{:#data.No}}</td>
            {{/for}}
            {{for ~makeArray(~maxVersions - Revisions.length)}}
            <td></td>
            {{/for}}
            {{for remarks}}
            <td rowspan="2">{{:#data}}</td>
            {{/for}}
            {{for ~makeArray(~maxRemarks - remarks.length)}}
            <td rowspan="2"></td>
            {{/for}}
            <td rowspan="2">{{:Signature}}</td>
        </tr>
        <tr>
            {{for Revisions}}
            <td>{{:#data.Approval_Date}}</td>
            {{/for}}
            {{for ~makeArray(~maxVersions - Revisions.length)}}
            <td></td>
            {{/for}}
        </tr>
    {{/for}}    
    </tbody>
</table>

And JS:

var APIData = [
  { 
    Section_No: '4.1',
    Document_Title: 'Sample Document Title',
    Document_ID: 'QM-CI-001',
    Revisions: [ 
      { No: '01', Approval_Date:'8/23/2017' },
      { No: '02', Approval_Date: '3/12/2018' }, 
    ], 
    remarks: [ 'OK', 'OK' ],
    Signature: 'Signature' 
  },
  { 
    Section_No: '4.2',
    Document_Title: 'Sample Document Title 2',
    Document_ID: 'QM-CI-002',
    Revisions: [ 
      { No: '01', Approval_Date: '3/12/2018' }, 
    ], 
    remarks: [ 'OK', 'OK', 'OK' ],
    Signature: 'Signature2' 
  },
];

$.views.helpers({
  getNumberWithOrdinal: function(n) {
    var s=["th","st","nd","rd"],
    v=n%100;
    return n+(s[(v-20)%10]||s[v]||s[0]); },
  makeArray: function(count) {
    var array = [];
    if(count) { array[count-1] = {}; }
    return array;
  }
});

var template = $.templates("#theTmpl");

var data = {
  maxVersions: 1,
  maxRemarks: 1,
  rows: APIData
};

APIData.forEach(function(row){
  var versions = row.Revisions.length;
  if( versions > data.maxVersions) { data.maxVersions = versions; }
  var remarks = row.remarks.length;
  if( remarks > data.maxRemarks) { data.maxRemarks = remarks; }
});

template.link("#result", data);