創建一個動態表，添加依賴於JQuery或JavaScript中數據的列和行

Question

我有一張桌子，希望使其更加動態。 例如，如何將此代碼更改為動態表。

當前版本和修訂日期列的示例。

如果當前版本和修改日期日有一個數據，將創建另一列，使其3或4等當前版本和修改日期列。

備注欄示例。

如果“ 備注”列中有數據，請在“ 備注”列中添加另一列，分別為1st，2nd，3rd，4th ...，依此類推。

請參閱下面的示例輸出。

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

樣本輸出

Answer 1

我建議您使用JsViews軟件包-它非常適合您的任務。

我使用您的示例數據准備了一個示例，擴展了2行： jsfiddle

這是jsViews / jsRender模板代碼：

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

和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);