javascript - 如何从 javascript 中的数组创建 html 表格元素 tilemap？

Question

如何从数组创建一个 html 表 tilemap？例如，当我希望“0”成为具有绿色背景和 20px 宽度和高度的“td”，而“1”成为具有相同大小的棕色背景的“td”时？任何人都可以举一个这个数组的例子吗？另外，我想知道如何将图片插入特定的“td”元素？例如，位置表[0][0] 上的“td”元素中的树图片，背景为绿色，谢谢。

var table = [
[0,1,1,1,0],
[0,1,0,0,0],
[0,1,1,0,0],
[0,0,1,0,0],
[1,1,1,0,0]
]

Answer 1

var arr = [                                        // the array
  [0, 1, 1, 1, 0],
  [0, 1, 0, 0, 0],
  [0, 1, 1, 2, 2],
  [0, 0, 1, 0, 2],
  [1, 1, 1, 0, 0]
];

var table = document.createElement("table");       // create a table element
var tbody = document.createElement("tbody");       // create a tbody element
table.appendChild(tbody);                          // add the tbody element to the table element

arr.forEach(function(sub, j) {                     // for each sub-array sub in the array arr (j is the index of this row)
  var row = document.createElement("tr");          // create a row element
  tbody.appendChild(row);                          // add the row element to the tbody element
  sub.forEach(function(num, i) {                   // for each number num in the array sub (i is the index of this column)
    var cell = document.createElement("td");       // create a cell element
    row.appendChild(cell);                         // add the cell element to this row element
    cell.className = num === 1? "brown": "green";  // if the number num is 1 then set the class to .brown, otherwise set it to .green
    cell.id = "cell-" + i + "-" + j;               // add an id to each cell so you can select it later
  });
});

// use table as you wish
document.body.appendChild(table);                  // in this example append it to the body

// ##################################################################################
// JUST AN EXAMPLE: (THE BELLOW CODE IS JUST TO GIVE YOU SOME INSIGHTS ON YOUR QUEST)
// ##################################################################################

var img = document.createElement("img");           // create the img element
img.src = "http://placehold.it/15";                // set its src

function moveTo(x, y) {                            // get a x and y and move the image to the cell at that pstion
  if(x < 0 || x > 4) return;                       // if x is out of bound, abort
  if(y < 0 || y > 4) return;                       // if y is out of bound, abort

  document.getElementById("cell-" + x + "-" + y).appendChild(img); // move the image img to cell-x-y (x from the left, and y from the top)
}

moveTo(2, 2);                                      // move to the third-third cell at start

document.addEventListener("click", function(e) {   // just an example: when clicking a td element, move the image to that cell
  var target = e.target;
  if(target.tagName === "TD")
    moveTo(target.id.match(/\d+/), target.id.match(/\d+$/));
});

.brown, .green {
  width: 20px;
  height: 20px;
}

.brown {
  background: brown;
}

.green {
  background: green;
}