Creating a dynamic table/grid from 2D Javascript array

Question

I'm trying to create a 6x6 table to store data for a simple puzzle that I'm working on, but rather than display 6 rows of 6 cells, all I can seem to output is all 36 cells within a single table row. Can anyone spot what I'm doing wrong here? For context: B&W represent Blue and White, and the array holds the "solution" of the puzzle.

//6x6 array
var solutionArray = new Array(6);
solutionArray[0] = new Array(6);
solutionArray[1] = new Array(6);
solutionArray[2] = new Array(6);
solutionArray[3] = new Array(6);
solutionArray[4] = new Array(6);
solutionArray[5] = new Array(6);

solutionArray[0][0] = "W";
solutionArray[0][1] = "W";
solutionArray[0][2] = "B";
solutionArray[0][3] = "B";
solutionArray[0][4] = "W";
solutionArray[0][5] = "B";

solutionArray[1][0] = "W";
solutionArray[1][1] = "B";
solutionArray[1][2] = "W";
solutionArray[1][3] = "B";
solutionArray[1][4] = "B";
solutionArray[1][5] = "W";

solutionArray[2][0] = "B";
solutionArray[2][1] = "W";
solutionArray[2][2] = "B";
solutionArray[2][3] = "W";
solutionArray[2][4] = "W";
solutionArray[2][5] = "B";

solutionArray[3][0] = "W";
solutionArray[3][1] = "B";
solutionArray[3][2] = "W";
solutionArray[3][3] = "W";
solutionArray[3][4] = "B";
solutionArray[3][5] = "B";

solutionArray[4][0] = "B";
solutionArray[4][1] = "B";
solutionArray[4][2] = "W";
solutionArray[4][3] = "B";
solutionArray[4][4] = "W";
solutionArray[4][5] = "W";

solutionArray[5][0] = "B";
solutionArray[5][1] = "W";
solutionArray[5][2] = "B";
solutionArray[5][3] = "W";
solutionArray[5][4] = "B";
solutionArray[5][5] = "W";



var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);


for (i = 0; i < solutionArray[i].length; i++) {
  //output the row tag
  var y = document.createElement("TR");
  y.setAttribute("id", "row");
  document.getElementById("gridTable").appendChild(y)

  for (j = 0; j < solutionArray.length; j++) {

    ///output the td tag
    var z = document.createElement("TD");
    var t = document.createTextNode(solutionArray[i][j]);
    z.appendChild(t);
    document.getElementById("row").appendChild(z);
  }

}

jorgonor · Accepted Answer · 2016-10-19 16:22:14Z

Notice you are using the same ID for every row. When you use document.getElementById this will always return the first node with this ID, because IDs uniquely identify a DOM node. It's not recommended to have more than one DOM node with the same ID.

Do this instead.

var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);

for (i = 0; i < solutionArray[i].length; i++) {
    //output the row tag
    var y = document.createElement("TR");
    y.setAttribute("id", "row");
    document.getElementById("gridTable").appendChild(y);

    for (j = 0; j < solutionArray.length; j++) {

    ///output the td tag
    var z = document.createElement("TD");
    var t = document.createTextNode(solutionArray[i][j]);
    z.appendChild(t);
   // change document.getElementById("row") by the y variable.
    y.appendChild(z);
  }
}

You can set the reference returned by document.createElement to a variable and do whatever you want with it.

Collectives™ on Stack Overflow

Creating a dynamic table/grid from 2D Javascript array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related