如何在Javascript中使用数组创建表格对象原型？

Question

假设这构成了一个表：

rows: 
      [ 
       //TABLE 1 
       { //TABLE 1 TITLE HEADER 
        cells: [ 
        {value: ""}, 
        {value: "Table 1", textAlign: "center", bold: "true"} 
        ] 
       }, 
       { // Header A 
        cells: [ 
        {value: ""}, 
        {value: "Month", textAlign: "center", verticalAlign: "center", background: "rgb(198,217,241)", bold: "true"}, 
        {value: "Metric", textAlign: "center", bold: "true"}, 
        {value: ""}, 
        {value: "Achievement (%)", textAlign: "center", verticalAlign: "center", bold: "true"}, 
        {value: "Weight (%)", textAlign: "center", bold: "true"}, 
        ] 
       }, 
       { // Header B 
        cells: [ 
        {value: ""}, 
        {value: ""}, 
        {value: "Plan", textAlign: "center", background: "rgb(192,0,0)", bold: "true", color:"white"}, 
        {value: "Actual", textAlign: "center", background: "rgb(0,176,80)", bold: "true", color:"white"}, 
        {value: ""}, 
        {value: "50", textAlign: "center", background: "rgb(198,217,241)"}] 
       }, 
       { // Table1 row1 
        cells: [ 
        {value: ""}, 
        {value: "1", textAlign: "center"}, 
        {value: "", textAlign: "center", background: "rgb(242,220,219)"}, 
        {value: "", textAlign: "center", background: "rgb(235,241,222)"}, 
        {value: "", textAlign: "center", background: "rgb(198,217,241)", bold:"true"}, 
        { value: "", textAlign: "center", background: "rgb(198,217,241)", bold:"true"}] 
       }, 
       { // Table1 row2 
        cells: [ 
        {value: ""}, 
        {value: "2", textAlign: "center"}, 
        {value: "", textAlign: "center", background: "rgb(242,220,219)" }, 
        {value: "", textAlign: "center", background: "rgb(235,241,222)"}, 
        {value: "", textAlign: "center", background: "rgb(198,217,241)", bold:"true"}, 
        {value: "", textAlign: "center", background: "rgb(198,217,241)", bold:"true"}] 
       } 
       { // FOOTER 
        cells: [ 
        {value: ""}, 
        {value: "Average per month", textAlign: "center", background: "rgb(198,217,241)", bold:"true"}, 
        {value: ""}, 
        {value: "", textAlign: "center", background: "rgb(198,217,241)", bold:"true"}, 
        {value: "", textAlign: "center", background: "rgb(198,217,241)", bold:"true"}, 
        {value: "", textAlign: "center", background: "rgb(255,192,0)", bold:"true"}] 
       } 
      ] 

如何使该表对象的原型，行，所以我可以重复使用多行多台的情况下，考虑到表包括

• 1标题报头
• 1头A和头1乙
• 至少1行，但是可以无限期地进行迭代
• 1页脚

我想要做的是为“表”和行对象创建一个构造函数/原型函数，这样我就可以通过增加索引号来循环“行”，而无需手动重写/添加具有相同模式的行/表。

更新：要添加更多的上下文，this fiddle显示我想迭代的“表”和“行”。

Answer 1

像这样的事情类样实现？：

var Tabel = (function() { 
 
    function Tabel(params) { 
 
     if (params === void 0) { params = {}; } 
 
     this.table = (params.table == void 0 ? document.createElement("table") : params.table); 
 
     if (params.attributes != void 0) { 
 
      for (var key in params.attributes) { 
 
       if (params.attributes.hasOwnProperty(key)) { 
 
        var attribute = params.attributes[key]; 
 
        this.table.setAttribute(key, attribute); 
 
       } 
 
      } 
 
     } 
 
     this.thead = this.table.appendChild(document.createElement("thead")); 
 
     this.tbody = this.table.appendChild(document.createElement("tbody")); 
 
     this.tfoot = this.table.appendChild(document.createElement("tfoot")); 
 
     this.rows = (params.rows == void 0 ? [] : params.rows) 
 
      .sort(function (a, b) { 
 
      var A = (a.headOrFoot == void 0 ? 0 : (a.headOrFoot ? 1 : -1)); 
 
      var B = (b.headOrFoot == void 0 ? 0 : (b.headOrFoot ? 1 : -1)); 
 
      return B - A; 
 
     }); 
 
     this.render(); 
 
    } 
 
    Tabel.prototype.render = function() { 
 
     cancelAnimationFrame(this.renderHandle); 
 
     this.renderHandle = requestAnimationFrame(this._render.bind(this)); 
 
    }; 
 
    Tabel.prototype._render = function() { 
 
     this.thead.innerHTML = this.tbody.innerHTML = this.tfoot.innerHTML = ""; 
 
     for (var rowIndex = 0; rowIndex < this.rows.length; rowIndex++) { 
 
      var row = this.rows[rowIndex]; 
 
      var inHead = (row.headOrFoot == void 0 ? 0 : (row.headOrFoot ? 1 : -1)); 
 
      var tr = void 0; 
 
      if (inHead == 1) { 
 
       tr = this.thead.appendChild(document.createElement("tr")); 
 
      } 
 
      else if (inHead == 0) { 
 
       tr = this.tbody.appendChild(document.createElement("tr")); 
 
      } 
 
      else { 
 
       tr = this.tfoot.appendChild(document.createElement("tr")); 
 
      } 
 
      for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) { 
 
       var cell = row.cells[cellIndex]; 
 
       var td = tr.appendChild(document.createElement(inHead != 0 ? 'th' : 'td')); 
 
       if (cell.attributes != void 0) { 
 
        for (var key in cell.attributes) { 
 
         if (cell.attributes.hasOwnProperty(key)) { 
 
          var attribute = cell.attributes[key]; 
 
          td.setAttribute(key, attribute); 
 
         } 
 
        } 
 
       } 
 
       td.innerHTML = cell.data.toString(); 
 
      } 
 
     } 
 
    }; 
 
    return Tabel; 
 
}()); 
 
//Test 
 
var t1 = new Tabel({ 
 
    attributes: { 
 
     id: "table-1", 
 
     "class": "table table-striped" 
 
    }, 
 
    rows: [ 
 
     { 
 
      cells: [ 
 
       { data: "ID", attributes: { style: "text-align: center", colspan: 1 } }, 
 
       { data: "Name" }, 
 
       { data: "Month" }, 
 
       { data: "Header" } 
 
      ], 
 
      headOrFoot: true 
 
     }, { 
 
      cells: [ 
 
       { data: "ID", attributes: { style: "text-align: center", colspan: 1 } }, 
 
       { data: "Name" }, 
 
       { data: "Month" }, 
 
       { data: "Footer" } 
 
      ], 
 
      headOrFoot: false 
 
     }, { 
 
      cells: [ 
 
       { data: 1 }, 
 
       { data: "Bob" }, 
 
       { data: "January", attributes: { colspan: 2 } } 
 
      ] 
 
     }, { 
 
      cells: [ 
 
       { data: 2 }, 
 
       { data: "Bill" }, 
 
       { data: "March", attributes: { colspan: 2 } } 
 
      ] 
 
     }, { 
 
      cells: [ 
 
       { data: 3 }, 
 
       { data: "Mona" }, 
 
       { data: "March", attributes: { colspan: 2 } } 
 
      ] 
 
     } 
 
    ] 
 
}); 
 
document.body.appendChild(t1.table);