組織元素與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]); 
    } 
} 

由於每行的列數相等，我們將當前行數乘以列總數，然後添加當前列數。