JavaScriptでテーブルにセルとして画像を追加する方法

Question

私は自分の割り当て用に作成しなければならないConnect4ゲームの一部としてJavascriptを使用して個々のセルごとにテーブルに画像を追加しようとしています。これで助けてください。ここで

は、私はイメージを追加しようとしています機能です：私が使用しようとしましたが、あなたの generateTable()関数内

function generateTable() 
    { 
     var brd = document.getElementById("board"); 

     var x =document.createElement("IMG"); 
     x.setAttribute("src","block.png"); 
     x.setAttribute("height","10%"); 
     x.setAttribute("width","10%"); 
     x.setAttribute("alt","block.png"); 

     var body = document.getElementsByTagName("body")[0]; 

     var tbl = document.createElement("table"); 
     var tblBody = document.createElement("tbody"); 

     var maxCol= 7; 
     var maxRow = 6; 

     for(var x=0;x<maxRow;x++) 
     { 
      var row = document.createElement("tr"); 

      for(var y=0;y<maxCol;y++) 
      { 
       var cell = document.createElement("td") ; 
      /* cell= "<img src='board.png' alt='board' height='10%' width = '10%'>";*/ 
     /* var cellImg= document.createElement("board"); 
       cell.appendChild(cellImg);*/ 
          //var cellText = document.createTextNode("jhgfbcjk"); 
          //cell.appendChild(x); 

       row.appendChild(cell); 
      }  

      tblBody.appendChild(row);   
     } 

     tbl.appendChild(tblBody); 
     body.appendChild(tbl); 
     /*tbl.setAttribute("border","2");*/ 
} 

Answer 1

を使用cell.innerHTML = '<img src="http://placehold.it/40x40?text=IMG" width="20" height="20" />';

function generateTable() { 
 
    var brd = document.getElementById("board"); 
 
    var body = document.getElementsByTagName("body")[0]; 
 
    var tbl = document.createElement("table"); 
 
    var tblBody = document.createElement("tbody"); 
 

 
    var maxCol = 7; 
 
    var maxRow = 6; 
 

 
    for (var x = 0; x < maxRow; x++) { 
 
    var row = document.createElement("tr"); 
 

 
    for (var y = 0; y < maxCol; y++) { 
 
     var cell = document.createElement("td"); 
 
     cell.innerHTML = '<img src="http://placehold.it/40x40?text=IMG" width="20" height="20" />'; 
 
     row.appendChild(cell); 
 
    } 
 

 
    tblBody.appendChild(row); 
 
    } 
 

 
    tbl.appendChild(tblBody); 
 
    brd.appendChild(tbl); 
 
} 
 
    
 
    generateTable()

<div id="board"></div>

Answer 2

を失敗してきたものである（コメントアウトされていますもの、追加してみてください。

function generateTable() 
{ 
    var whateverrow=document.getElementById("yourId").rows[0]; 
    x.innerHTML="<img src='URL' alt='whatever'/>"; 
} 

これは、HTMLのimg要素に新しいセルの内部HTMLを設定する必要があります。