如何設置圖像標籤到JavaScript表的JavaScript？

Question

我是Javascript新手，想用Javascript繪製動態表。該表在一行中有兩列。這是我如何創建表格本身：

var body = document.body, 
    tbl = document.createElement('table'); 
    tbl.style.width = '100px'; 
    tbl.style.border = '1px solid black'; 

    for (var i = 0; i < 3; i++) { 
     var tr = tbl.insertRow(); 
     for (var j = 0; j < 2; j++) { 
      if (i == 3 && j == 1) { 
      break; 
      } else { 
      var td = tr.insertCell(); 
      td.appendChild(document.createTextNode('Cell')); 
      td.style.border = '1px solid black'; 
      } 
     }//end if 
    } 

body.appendChild(tbl); 

我想顯示其中一列的動態圖像。這是創建動態圖像的代碼：

var oImg=document.createElement("img"); 
oImg.setAttribute('src', 'http://esam.ir/sell/itemImages/99989/adyingwish_101900-609006!1.png'); 
oImg.setAttribute('alt', 'na'); 
oImg.width = '100'; 
oImg.height = '100'; 
document.body.appendChild(oImg); 

我試圖做到的，是這樣的：

我試圖將圖像的細胞，沒有運氣追加這樣的：

var body = document.body, 
    tbl = document.createElement('table'); 
    tbl.style.width = '100px'; 
    tbl.style.border = '1px solid black'; 

    for (var i = 0; i < 3; i++) { 
     var tr = tbl.insertRow(); 
     for (var j = 0; j < 2; j++) { 
     if (i == 3 && j == 1) { 
      break; 
     } else { 
      var td = tr.insertCell(); 
      td.appendChild(document.createTextNode('Cell')); 
      td.style.border = '1px solid black'; 
      var oImg = document.createElement("img"); 
      oImg.setAttribute('src', 'http://esam.ir/sell/itemImages/99989/adyingwish_101900-609006!1.png'); 
      oImg.setAttribute('alt', 'na'); 
      oImg.width = '100'; 
      oImg.height = '100'; 
      document.body.appendChild(oImg);  
     } 
     }//end if 

    } 

body.appendChild(tbl); 

這將創建一個像這樣的表：

這不是理想的結果。我如何在第二個單元上插入圖像？

Answer 1

下面介紹如何做到這一點。

var body = document.body, 
 
    tbl = document.createElement('table'); 
 
tbl.style.width = '100px'; 
 
tbl.style.border = '1px solid black'; 
 

 
for (var i = 0; i < 3; i++) { 
 
    var tr = tbl.insertRow(); 
 
    for (var j = 0; j < 2; j++) { 
 
    if (i == 3 && j == 1) { 
 
     break; 
 
    } else { 
 
     var td = tr.insertCell(); 
 
     td.style.border = '1px solid black'; 
 

 
     if (j == 1) { 
 
     var oImg = document.createElement("img"); 
 
     oImg.setAttribute('src', 'http://esam.ir/sell/itemImages/99989/adyingwish_101900-609006!1.png'); 
 
     oImg.setAttribute('alt', 'na'); 
 
     oImg.width = '100'; 
 
     oImg.height = '100'; 
 
     td.appendChild(oImg); 
 
     } else { 
 
     td.appendChild(document.createTextNode('Cell')); 
 
     } 
 

 
    } 
 
    } //end if 
 

 
} 
 

 
body.appendChild(tbl);

只看到如果單元格是第二個j == 1如果是附加的圖像（到TD，而不是身體），否則追加文本「小區」或其他任何你想要。

Answer 2

我修改了你的代碼試試這個。

var body = document.body, 
    tbl = document.createElement('table'); 
    tbl.style.width = '100px'; 
    tbl.style.border = '1px solid black'; 

    for (var i = 0; i < 3; i++) { 
     var tr = tbl.insertRow(); 
     for (var j = 0; j < 2; j++) { 
      if (i == 3 && j == 1) { 
       break; 
      } else { 
       var td = tr.insertCell(); 
       td.appendChild(document.createTextNode('Cell')); 
       td.style.border = '1px solid black'; 
       if(j==1) 
       { 
       var oImg = document.createElement("img"); 
       oImg.setAttribute('src', 'http://esam.ir/sell/itemImages/99989/adyingwish_101900-609006!1.png'); 
       oImg.setAttribute('alt', 'na'); 
       oImg.width = '100'; 
       oImg.height = '100'; 

        td.appendChild(oImg); 
       } 

      } 
     }//end if 

    } 

    body.appendChild(tbl); 

您正在將圖像追加到身體，但它被附加到td。 我希望它有幫助。