我主要是JavaScript和jQuery的初学者,到目前为止,我最终还是制作了棋盘。我有一个由表格HTML制成的棋盘。我想知道当用户单击表中的特定单元格时该表的索引,因此我可以使程序返回到板子列表中,并在以后查找潜在的移动。我怎样才能做到这一点?
//makes table in html
for(var i =1; i<=8; i++)
{
document.write("<tr>");
for(var k=1; k<=8; k++)
{
document.write("<td>"+"</td>");
}
document.write("</tr>");
}
//pieces for white
var img=[{src:"<img src='http://hanin.net/img/chess/wr.png' height=50 width=50></img>",type:"r",x:0,y:0},{src:"<img src='http://hanin.net/img/chess/wn.png' height=50 width=50></img>",type:"n",x:1,y:0},{src:"<img src='http://hanin.net/img/chess/wb.png' height=50 width=50></img>",type:"b",x:2,y:0},{src:"<img src='http://hanin.net/img/chess/wk.png' height=50 width=50></img>",type:"k",x:3,y:0},{src:"<img src='http://hanin.net/img/chess/wq.png' height=50 width=50></img>",type:"q",x:4,y:0},{src:"<img src='http://hanin.net/img/chess/wb.png' height=50 width=50></img>",type:"b",x:5,y:0},{src:"<img src='http://hanin.net/img/chess/wn.png' height=50 width=50></img>",type:"n",x:6,y:0},{src:"<img src='http://hanin.net/img/chess/wr.png' height=50 width=50></img>",type:"r",x:7,y:0},{src:"<img src='http://hanin.net/img/chess/wp.png' height=50 width=50></img>",type:"p",x:0,y:1},{src:"<img src='http://hanin.net/img/chess/wp.png' height=50 width=50></img>",type:"p",x:1,y:1},{src:"<img src='http://hanin.net/img/chess/wp.png' height=50 width=50></img>",type:"p",x:2,y:1},{src:"<img src='http://hanin.net/img/chess/wp.png' height=50 width=50></img>",type:"p",x:3,y:1},{src:"<img src='http://hanin.net/img/chess/wp.png' height=50 width=50></img>",type:"p",x:4,y:1},{src:"<img src='http://hanin.net/img/chess/wp.png' height=50 width=50></img>",type:"p",x:5,y:1},{src:"<img src='http://hanin.net/img/chess/wp.png' height=50 width=50></img>",type:"p",x:6,y:1},{src:"<img src='http://hanin.net/img/chess/wp.png' height=50 width=50></img>",type:"p",x:7,y:1}];
//puts objects into board
var count=0;
for(c=0;c<2;c++){
for(cc=0;cc<8;cc++){
var myTable = document.getElementById('board');
myTable.rows[c].cells[cc].innerHTML = img[count].src ;
count++;
}
}
//pieces for black
var img1=[{src:"<img src='http://hanin.net/img/chess/br.png' height=50 width=50></img>",type:"R",x:0,y:7},{src:"<img src='http://hanin.net/img/chess/bn.png' height=50 width=50></img>",type:"N",x:1,y:7},{src:"<img src='http://hanin.net/img/chess/bb.png' height=50 width=50></img>",type:"B",x:2,y:7},{src:"<img src='http://hanin.net/img/chess/bk.png' height=50 width=50></img>",type:"K",x:3,y:7},{src:"<img src='http://hanin.net/img/chess/bq.png' height=50 width=50></img>",type:"Q",x:4,y:7},{src:"<img src='http://hanin.net/img/chess/bb.png' height=50 width=50></img>",type:"B",x:5,y:7},{src:"<img src='http://hanin.net/img/chess/bn.png' height=50 width=50></img>",type:"N",x:6,y:7},{src:"<img src='http://hanin.net/img/chess/br.png' height=50 width=50></img>",type:"R",x:7,y:7},{src:"<img src='http://hanin.net/img/chess/bp.png' height=50 width=50></img>",type:"P",x:0,y:6},{src:"<img src='http://hanin.net/img/chess/bp.png' height=50 width=50></img>",type:"P",x:1,y:6},{src:"<img src='http://hanin.net/img/chess/bp.png' height=50 width=50></img>",type:"P",x:2,y:6},{src:"<img src='http://hanin.net/img/chess/bp.png' height=50 width=50></img>",type:"P",x:3,y:6},{src:"<img src='http://hanin.net/img/chess/bp.png' height=50 width=50></img>",type:"P",x:4,y:6},{src:"<img src='http://hanin.net/img/chess/bp.png' height=50 width=50></img>",type:"P",x:5,y:6},{src:"<img src='http://hanin.net/img/chess/bp.png' height=50 width=50></img>",type:"P",x:6,y:6},{src:"<img src='http://hanin.net/img/chess/bp.png' height=50 width=50></img>",type:"P",x:7,y:6}];
//put objects into board
var counter=0;
for(c=7;c>5;c--){
for(cc=0;cc<8;cc++){
var myTable = document.getElementById('board');
myTable.rows[c].cells[cc].innerHTML = img1[counter].src ;
counter++;
}
}
//declare 8*8 array
function zero2D(rows, cols) {
var array = [], row = [];
while (cols--) row.push(0);
while (rows--) array.push(row.slice());
return array;
}
board=zero2D(8,8);
var cr=0;
for(w=0;w<16;w++){
var xx=img[cr].x;
var yy=img[cr].y;
board[xx][yy]= img[cr].type;
cr++;
}
var crr=0;
for(w=0;w<2;w++){
for(c=0;c<8;c++){
var x=img1[crr].x;
var y=img1[crr].y;
board[x][y]= img1[crr].type;
crr++;
}
}
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
tr td
{
background-color: #fff;
}
tr:nth-child(even) td:nth-child(odd),
tr:nth-child(odd) td:nth-child(even)
{
background-color: #ccc;
}
td, th {
width: 60px;
height: 60px;
border: 1px solid #ccc;
text-align: center;
position: relative;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>chess</title>
<link rel="stylesheet" href="css/chess.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<html>
<body background-color = #cfff>
<table id = 'board'>
</body>
</html>
最佳答案
在嵌套的for循环中,我将尝试执行以下操作:
document.write("<td class ="+ "'"+ i + ":"+ k + "'" +" onclick='someFunction(this.id)'>"+"</td>");
然后,您将得到一个
someFunction(cellId)
您可以使用
id.split(":");
拉出x和y坐标