Question

你好，我是网络开发的新手。我正在尝试制作8X8表格，每个单元格都附加到图像上。我想知道为什么图像不会附加到单元格

这应该会产生类似的结果：
＆＃34; ＆＃34; 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);
}

谢谢你的时间

Answer 1

这并不能完全解决您的代码问题，但您可能会考虑为网格上与您想要放置的图像对应的每个方块分配一个css类。然后使用css文件将元素的背景设置为等于图像。然后你可以使用浏览器的开发工具（chrome / firefox中的F12）来解决链接问题，如果它们仍然没有出现的话。

使用javascript绘制带有图像（游戏板）的8×8表

1 个答案: