javascript - 如何使javascript显示用户鼠标单击的表的索引

Question

我主要是 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>

Answer 1

在你嵌套的 for 循环中，我会尝试这样的事情:

document.write("<td class ="+ "'"+ i + ":"+ k + "'" +" onclick='someFunction(this.id)'>"+"</td>");  

然后你会有一个someFunction(cellId)

您可以使用 id.split(":");

提取 x 和 y 坐标