假设这构成一个表格：
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"}]
}
]
如何为表和行创建对象原型，以便我可以使用多行迭代多个表实例，前提是表包含
我想要做的是为＆＃34;表＆＃34;制作一个构造函数/原型函数。和行对象，以便我可以循环＆＃34;行＆＃34;随着索引号的增加，无需手动重写/添加具有相同模式的行/表。
更新：要添加更多上下文，this fiddle会显示＆＃34;表格＆＃34;和＆＃34;行＆＃34;我想迭代。
答案 0 :(得分：0)
像类这样的类实现？：
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);