How to add images as cells in table with Javascript

Question

I'm trying to add an image to my table for each individual cell using Javascript as part of a Connect4 game that I have to create for my assignment. Could I please get some help with this?

Here's the function that I am trying to add the image in: (the stuff that's been commented out is what I've tried to use but failed

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");*/
}

what does cell.appendChild(x); do , also can you give image as attachment here we can't figure what you want exactly without details ,? — Bourbia Brahim
– Bourbia Brahim, Commented Mar 12, 2017 at 12:42
Add code snippet only if you have code that can run, if you have not completed code use 4 space indent or {} button when selecting code. — jcubic
– jcubic, Commented Mar 12, 2017 at 12:56

Brett DeWoody · Accepted Answer · 2017-03-12 12:50:05Z

2

Use 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>

answered Mar 12, 2017 at 12:50

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaynill Gopal Over a year ago

Thanks this helped

Brett DeWoody Over a year ago

Did this solution, or any of the others, help solve your issue? If so, please Accept the solution.

score 0 · Accepted Answer · 2017-03-12 12:29:24Z

0

Within your generateTable() function, try adding:

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

This should set the inner HTML of a new cell to a HTML img element.

edited Mar 12, 2017 at 12:29

answered Mar 12, 2017 at 12:24

user7582130

1 Comment

Jaynill Gopal Over a year ago

its still not working, the compiler im using says document.getElementById("yourId").rows[0]; is not defined

Collectives™ on Stack Overflow

How to add images as cells in table with Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related