javascript - 如何使用javascript将图像标签设置到html表中？

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，而不是正文)，否则附加文本“Cell”或其他任何内容你愿意。