我正在尝试像这样创建一个棋盘。
我确实创建了一张桌子，但不知道如何给它上色。A 还需要打印电路板名称（如 A1、A2、... H8）并能够将任何图形放入任何单元格中。
首先，这是创建表的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ChessBoard</title>
<script type="text/javascript">
function CreateTable(){
var poz = document.getElementById('space');
// createing table adn inserting into document
tab = document.createElement('table');
poz.appendChild(tab);
tab.border = '5';
for (var i = 0; i < 8; i++){
// creating row and inserting into document
var row = tab.insertRow(i);
for(var j = 0; j < 8; j++){
// creating cells and fill with data (numbers)
var cell = row.insertCell(j);
cell.innerHTML = i*j;
cell.style.backgroundColor = 'blue';
cell.style.color = 'white';
cell.style.height = '50px';
cell.style.width = '50px';
};
};
}
</script>
</head>
<body onload="CreateTable()" id ="space">
</body>
</html>
如何用图形填充特定单元格（如 A3、E5、H8、...）？图是图像。
第 2 部分：我确实在您的帮助下创建了一个板。现在我正试图从这段代码中做更多的事情。
如何将多个不同的图像放入多个单元格中？我正在尝试获得正确的工作代码，但没有成功。此图像应在加载表格时出现（当我按下按钮 CreateTable 时）。我尝试使用以下代码创建：
在这一点上，我想把数字放在船上。当我创建表时，它应该是空白的。然后会有按钮来添加数字。开头为每个不同的图自己的按钮
像这样的东西：
function addKing(idStr){
cell = document.getElementById(idStr);
if(cell != null){
// works for color, doesn't work for images!!
// cell.style.backgroundColor = 'red';
cell.src = 'http://akramar.byethost8.com/images/SplProg/DN3/images/50px/king_m.png'
}
}
html中的按钮addKing：
<button id="king" onclick="addKing(prompt('Insert field'))">Add King</button>
如果我可以将所有代码放在一起并选择我喜欢插入的那个，则将previousu代码升级到更好（提示窗口1：什么数字：'king，queen，...'，提示窗口2：你想在什么位置插入：'A1，B3，...'））。
函数 addImage（类型，位置）{ var img = ?? }
当我按下按钮添加图像时，应出现提示窗口并询问类型（国王，王后，根，...）和位置（A1，B4，...）（进一步更新甚至颜色（黑色或白色）但让我们一步一步构建）。
我想用javascript和dom构建所有的棋盘。
链接到不工作的例子：jsfiddle
