我有以下HTML代码.. 现在我想在点击的元素中添加一个图像（Say Alphabet image Q）。 我是javascript的新手..请简要说明我们应该如何做...
提前致谢..
<html>
<head>
<title>
8*8 Queen
</title>
以下是css代码..
<style>
td {
width:70px;
height:70px;
background-color:white;
border:1px solid;
}
.black {
background:black;
}
.white {
background: white;
}
.red {
background:red !important;
}
</style>
以下是javascript代码..
//var window.boxFlag=new Array();
//var window.i=0;
var myEntry = new Array();
function init() {
for (var i = 1; i <= 8; i++) {
myEntry[i] = new Array();
for (var j = 1; j <= 8; j++) {
myEntry[i][j] = 0;
}
}
}
function removeQueen(domObj) {
}
function place(domObj, row, col) {
var placeQueen = true;
if (myEntry[row][col] == 1) {
//if already added, remove entry
myEntry[row][col] = 0;
domObj.classList.toggle("red");
} else {
//New entry
//column validate
for (var i = 1; i <= 8; i++) {
if (myEntry[i][col] == 1) {
placeQueen = false;
break;
}
}
//row validate
for (var j = 1; j <= 8; j++) {
if(myEntry[row][j]==1){
placeQueen=false;
break;
}
}
//Diagonal validate
for(var i=row-1,j=col-1;i>0&&j>0;i--,j--){
if(myEntry[i][j]==1){
placeQueen=false;
break;
}
}
for(var i=row+1,j=col+1;i<=8&&j<=8;i++,j++){
//alert(i);
if(myEntry[i][j]==1){
placeQueen=false;
break;
}
}
for(var i=row+1,j=col-1;i<=8&&j>0;i++,j--){
if(myEntry[i][j]==1){
placeQueen=false;
break;
}
}
for(var i=row-1,j=col+1;i>0&&j<=8;i--,j++){
if(myEntry[i][j]==1){
placeQueen=false;
break;
}
}
if (placeQueen) {
//on success
myEntry[row][col] = 1;
//set to true
domObj.classList.toggle("red");
//To toggle red with white/black
}
else {
alert("Not a proper place");
}
}
}
</script>
</head>
Html从正文开始
<body onload="init();">
<table>
<tr id="row1">
<td class="black" onclick="place(this, 1, 1)">
</td>
<td class="white" onclick="place(this, 1, 2)"></td>
<td class="black" onclick="place(this, 1, 3)"></td>
<td class="white" onclick="place(this, 1, 4)"></td>
<td class="black" onclick="place(this, 1, 5)"></td>
<td class="white" onclick="place(this, 1, 6)"></td>
<td class="black" onclick="place(this, 1, 7)"></td>
<td class="white" onclick="place(this, 1, 8)"></td>
</tr>
<tr id="row2">
<td class="white" onclick="place(this, 2, 1)"></td>
<td class="black" onclick="place(this, 2, 2)"></td>
<td class="white" onclick="place(this, 2, 3)"></td>
<td class="black" onclick="place(this, 2, 4)"></td>
<td class="white" onclick="place(this, 2, 5)"></td>
<td class="black" onclick="place(this, 2, 6)"></td>
<td class="white" onclick="place(this, 2, 7)"></td>
<td class="black" onclick="place(this, 2, 8)"></td>
</tr>
<tr id="row3">
<td class="black" onclick="place(this, 3, 1)"></td>
<td class="white" onclick="place(this, 3, 2)"></td>
<td class="black" onclick="place(this, 3, 3)"></td>
<td class="white" onclick="place(this, 3, 4)"></td>
<td class="black" onclick="place(this, 3, 5)"></td>
<td class="white" onclick="place(this, 3, 6)"></td>
<td class="black" onclick="place(this, 3, 7)"></td>
<td class="white" onclick="place(this, 3, 8)"></td>
</tr>
<tr id="row4">
<td class="white" onclick="place(this, 4, 1)"></td>
<td class="black" onclick="place(this, 4, 2)"></td>
<td class="white" onclick="place(this, 4, 3)"></td>
<td class="black" onclick="place(this, 4, 4)"></td>
<td class="white" onclick="place(this, 4, 5)"></td>
<td class="black" onclick="place(this, 4, 6)"></td>
<td class="white" onclick="place(this, 4, 7)"></td>
<td class="black" onclick="place(this, 4, 8)"></td>
</tr>
<tr id="row5">
<td class="black" onclick="place(this, 5, 1)"></td>
<td class="white" onclick="place(this, 5, 2)"></td>
<td class="black" onclick="place(this, 5, 3)"></td>
<td class="white" onclick="place(this, 5, 4)"></td>
<td class="black" onclick="place(this, 5, 5)"></td>
<td class="white" onclick="place(this, 5, 6)"></td>
<td class="black" onclick="place(this, 5, 7)"></td>
<td class="white" onclick="place(this, 5, 8)"></td>
</tr>
<tr id="row6">
<td class="white" onclick="place(this, 6, 1)"></td>
<td class="black" onclick="place(this, 6, 2)"></td>
<td class="white" onclick="place(this, 6, 3)"></td>
<td class="black" onclick="place(this, 6, 4)"></td>
<td class="white" onclick="place(this, 6, 5)"></td>
<td class="black" onclick="place(this, 6, 6)"></td>
<td class="white" onclick="place(this, 6, 7)"></td>
<td class="black" onclick="place(this, 6, 8)"></td>
</tr>
<tr id="row7">
<td class="black" onclick="place(this, 7, 1)"></td>
<td class="white" onclick="place(this, 7, 2)"></td>
<td class="black" onclick="place(this, 7, 3)"></td>
<td class="white" onclick="place(this, 7, 4)"></td>
<td class="black" onclick="place(this, 7, 5)"></td>
<td class="white" onclick="place(this, 7, 6)"></td>
<td class="black" onclick="place(this, 7, 7)"></td>
<td class="white" onclick="place(this, 7, 8)"></td>
</tr>
<tr id="row8">
<td class="white" onclick="place(this, 8, 1)"></td>
<td class="black" onclick="place(this, 8, 2)"></td>
<td class="white" onclick="place(this, 8, 3)"></td>
<td class="black" onclick="place(this, 8, 4)"></td>
<td class="white" onclick="place(this, 8, 5)"></td>
<td class="black" onclick="place(this, 8, 6)"></td>
<td class="white" onclick="place(this, 8, 7)"></td>
<td class="black" onclick="place(this, 8, 8)"></td>
</tr>
</table>
</body>
</html>