如何使javascript显示用户单击鼠标时表的索引 [英] how to make javascript display the index of the table the user is mouse clicking

问题描述

我主要是JavaScript和jQuery的初学者，到目前为止，我最终还是制作了国际象棋棋盘.我有一个由表格HTML制成的棋盘.我想知道当用户单击表中的特定单元格时该表的索引，因此我可以使该程序返回到板列表中，并在以后查找潜在的移动.我该怎么办?

I'm mostly a beginner in JavaScript and jQuery and I ended up making a chess board so far. I have a chess board that is made from table HTML. I want to know the index of the table when the user clicks a particular cell in the table so I can make the program go back into the board list and find the potential moves later. How can I do this?

//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>

推荐答案

以下代码获取单元格row/col:

var myCells = document.getElementById('board').getElementsByTagName('td');

for(var i = 0; i < myCells.length; i++) {
  myCells[i].onclick = (function(index) {
    return function() {
      //Here you get Row/Col
      var row = Math.floor(index/8), col = index%8;
      alert("Row" + row  + ", Col:" + col );
    }
  })(i);
}

演示: http://plnkr.co/edit/tppCdCTfkvONYE8sTV9s ?p =预览

这篇关于如何使javascript显示用户单击鼠标时表的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！