CODEWITHSUNDEEP
javascriptdom
Renata P Souza
Renata P Souza

Reputation: 255

Organize elements in a table with DOM - JavaScript

this code is to create a table

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

like this image 1

enter image description here

class Paneland function to 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;
}

and I wanna made like this image 2

enter image description here

and I can made, if I do

//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())
 ...
 ;

but I try to create the lines and columns using for and put the equipaments, I think maybe have restriction when is four column, change to another line, I have all ready, now is only a matter of calculations 

//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]);
    }
  }
}

Any suggestion?

Upvotes: 2

Views: 77

Answers (1)

user1106925
user1106925

Reputation:

Given your updated question, it seems that you simply need to convert a flat Array into a rectangular one by passing each member of the flat this.equipaments Array into the constructor.

If that's the case, and given that the number of lines * columns will be equal to the this.equipaments.length, then instead of an if statement, all you'd need is to calculate the index from i and 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]);
  }
}

Because there are an equal number of columns per lines, we multiply the current line number by the total number of columns and then add the current column number.

Upvotes: 1

Related Questions