用javascript绘制一个带有图像的8 × 8的表格(游戏板)

draw a 8 X 8 table with images (game board) with javascript

本文关键字：表格 游戏 图像 绘制 javascript 一个      更新时间：2023-09-26

你好，我是web开发新手。我试图使8X8表，每个单元格附加到一个图像。我想知道为什么图像不会附加到单元格

结果应该是这样的:
"ABCDEFGH
1
2
3
4
5
6
7
8

代码

function drawGame(){    
    var table = document.createElement('table');
    table.setAttribute('style','float:left');
    var startRow = table.insertRow(0);
    var srcW="./assets/img/disk-w.png";
    var srcB="./assets/img/disk-b.png";
    var srcE="./assets/img/disk-e.png";
                         //'<td><img src="./assets/img/disk-b.png" alt="B" class="disk-black" rel="'.$x.':'.$y.'" /></td>'; break;
    var img = document.createElement('img');
    //img.src = "link to image here";
    //x.appendChild(img);
    var row;
    var text = document.createTextNode("&nbsp;");
    var cell = startRow.insertCell(0);
    cell.setAttribute('class','board-corner');
    var c = 'A'.charCodeAt();
    for(j=0; j<8; j++){
        text = document.createTextNode(String.fromCharCode(c++));
        cell = startRow.insertCell(j+1);
        cell.appendChild(text);
    }
    for(y=1;y<=8;y++)
    {
        row=table.insertRow(y);
        text = document.createTextNode(y);
        cell = row.insertCell(0);
        cell.appendChild(text);
        for(x=0;x<8;x++)
        {
            img.src = srcE;
            cell = row.insertCell(x+1);
            cell.appendChild(img);
            cell.setAttribute('class','disk-empty');
            cell.setAttribute('alt','e');
        }
    }
document.getElementById("gameDiv").appendChild(table);
}

感谢您的宝贵时间

这并不能完全解决您的代码，但是您可以考虑为网格上的每个与您想要放置的图像相对应的正方形分配一个css类。然后使用css文件设置元素的背景等于您的图像。然后你可以使用你的浏览器的开发工具(F12在chrome/firefox)，以故障排除您的链接，如果他们仍然没有显示。

相关文章：