小贝子编程

如何让javascript显示用户鼠标点击的表的索引



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

您可以使用jQuery .index()；

//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++;
   
  }  
}
$('#board td').click(function(){
  var row = $(this).parent('tr').index()+1;
  var col = $(this).index()+1;
   console.log('(' + row + ','+ col + ')');
})
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>

点击添加可以传递k，i

document.write('<td onClick="onClickHandler('+ i ',' + j ')>' + '</td>');

在onClickHandler 中

function onClickHandler(x, y) {
}

以下代码获取单元格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=preview

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium