Question

我尝试使用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");*/
}

Answer 1

在generateTable()功能中，尝试添加：

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

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

Answer 2

使用cell.innerHTML = '<img src="http://placehold.it/40x40?text=IMG" width="20" height="20" />';

＆＃13;

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

＆＃13;

<div id="board"></div>

＆＃13;

如何使用Javascript将图像作为单元格添加到表格中

2 个答案: