如何使用Javascript将图像添加为表格中的单元格答案

【问题标题】：How to add images as cells in table with Javascript如何使用Javascript将图像添加为表格中的单元格
【发布时间】：2017-08-02 12:01:41
【问题描述】：

我正在尝试使用 Javascript 为每个单独的单元格添加一个图像，作为我必须为我的作业创建的 Connect4 游戏的一部分。我能得到一些帮助吗？

这是我试图在其中添加图像的功能：（被注释掉的东西是我尝试使用但失败的东西

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

【问题讨论】：

cell.appendChild(x); 是做什么的，你也可以把图片作为附件在这里我们无法确定你想要什么没有细节，？
只有当你有可以运行的代码时才添加代码sn-p，如果你还没有完成代码，在选择代码时使用4个空格缩进或{}按钮。
cell.appendChild(x);本来是要被注释掉的抱歉

标签： javascript html dom html-table

【解决方案1】：

使用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()

&lt;div id="board"&gt;&lt;/div&gt;

【讨论】：

感谢帮助
此解决方案或其他任何解决方案是否有助于解决您的问题？如果有，请Accept the solution。

【解决方案2】：

在您的 generateTable() 函数中，尝试添加：

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

这应该将新单元格的内部 HTML 设置为 HTML img 元素。

【讨论】：

它仍然无法工作，我使用的编译器说 document.getElementById("yourId").rows[0];未定义