Как установить тег изображения в таблицу html с помощью 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 и если добавить изображение (в тд, а не тело), ​​в противном случае добавить текст «Cell» или что-нибудь еще вы хотели бы.

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. Надеюсь, это помогло.