组织元素与DOM的表 - 的JavaScript

Question

这个代码是创建一个表

var table = document.createElement("table"); 
if ((lines > 0) && (columns> 0)) { 
    var tbody = document.createElement("tbody"); 
    var tr, td; 
    for (var i = 0; i < lines; i++) { 
     tr = document.createElement("tr"); 
     for (var j = 0; j < columns; j++) { 
     td = document.createElement("td"); 
     tr.appendChild(td); 
     } 
     tbody.appendChild(tr); 
    } 
    table.appendChild(tbody); 
    document.body.appendChild(table); 

这样图像1

class Panel和function到putAndShowEquipment

function Panel(id, line, column) { 
    this.id = id; 
    this.lines = line; 
    this.columns = column; 
    this.equipments = []; 
    for(var i = 0; i < lines; i++{ 
     this.equipments[i] = []; 
    } 

} 

Panel.prototype.putAndShowEquipment = function(line, column, equipment) { 
    if ((line >= 0) && (line < this.lines) 
    && (column >= 0) && (column < this.columns) 
    && ((equipament === void 0) || (equipament instanceof Equipament))) { 
    this.equipaments[line][column] = equipament; 
    if (equipament) { 
     equipament.show(this.cell(line, column)); 
    } else { 
     (new View()).show(this.cell(line, column)); 
    } 
    } 
    return this; 
} 

，我想成为这个形象2

，我可以做，如果我做

//panel with 4 lines and 4 columns to 16 equipments 
(new Panel("panel",4,4)) 
.putAndShowEquipment (0, 0, new Equipament()) 
.putAndShowEquipment (0, 1, new Equipament()) 
.putAndShowEquipment (1, 0, new Equipament()) 
.putAndShowEquipment (1, 1, new Equipament()) 
.putAndShowEquipment (2, 0, new Equipament()) 
.putAndShowEquipment (2, 1, new Equipament()) 
... 
; 

但我尽量为四个何时创建lines和columns使用for，把equipaments，我想也许有限制列，换另一行，我已经准备好了，现在只是一个的问题计算

//four lines 
for (var i = 0; i < lines; i++) { 
//four columns 
    for (var j = 0; j < columns; j++) { 
    //if column is four 
    if (j === 4) { 
     //change line 
    //this.equipaments.lenght = 16 equipments 
     panel.putAndShowEquipment(i + 1, j, this.equipaments[i]); 
    } else { 
     panel.putAndShowEquipment(i, j, this.equipaments[i]); 
    } 
    } 
} 

有什么建议吗？

Answer 1

鉴于您的更新问题，您似乎只需将扁平数组转换为矩形数组，即将平面this.equipaments数组的每个成员传递给构造函数。

如果是这样的情况下，并考虑到的lines * columns数量将等于this.equipaments.length，然后代替if声明，所有你需要的是从i和j计算指数。

// lines * columns === this.equipaments.length 

for (var i = 0; i < lines; i++) { 
    for (var j = 0; j < columns; j++) { 
    panel.putAndShowEquipment(i + 1, j, this.equipaments[(i * columns) + j]); 
    } 
} 

由于每行的列数相等，我们将当前行数乘以列总数，然后添加当前列数。