javascriptの配列からHTMLテーブル要素のタイルマップを作成するには？

Question

配列からhtmlテーブルのタイルマップを作成するにはどうすればよいですか？例えば、 "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; 
 
}