How to set image tag to the html table with javascript?

Question

I'm new to Javascript and want to draw dynamic table with Javascript. The table has two columns within a row. This is how I create the table itself:

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);

I want show a dynamic image for one of the columns. This is the code for creating the dynamic image:

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);

What I'm trying to achieve is something like this:

I tried to append the images to the cells like this with no luck:

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);

This creates a table like this:

This is not the desired outcome. How can I insert the image on the second cells?

thepio · Accepted Answer · 2016-08-30 07:29:25Z

Here's how you can do it.

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);

Just see if the cell is the second one j == 1 and if it is append an image (to the td, not the body), else append the text "Cell" or anything else you would like.

Suhail Akhtar · Accepted Answer · 2016-08-30 07:23:21Z

I have modified your code try this one.

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);

You were appending images to body but it was to be attached to the td. I hope it helped.

Collectives™ on Stack Overflow

How to set image tag to the html table with javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related