如何获取动态表的属性
[英]How to get property of dynamic table
问题描述
我的项目有些麻烦
我需要制作一个游戏：《扫雷》，
我在这个专案中的主要问题是，我的html网页中有动态表格，而我在Javascript网页中建立矩阵，
我想获取通过onclick事件将其推送的当前单元格，而我仅获得第一个单元格（0,0）：
这是我的家庭作业项目，我只需要帮助就可以了解如何获取被单击的每个单元格的索引，
我的html页面：
<body onload="initGame()">
<header>
<h1>My Mine Sweeper</h1>
</header>
<table class="mineTable" onclick="cellClicked(this)" border="1">
<tbody class="mineSweeperTable" ></tbody>
</table>
我的JavaScript页面：
'use strict';
var gMINE = '❉';
var gCELL = ' ';
var gLevel = {
SIZE : 4 ,
MINES: 0.2
};
var gCell ={
i : 0 ,
j : 1
}
var gMineSweeper = [];
function getRandomCell() {
return (Math.random() > gLevel.MINES)? gCELL : gMINE ;
}
function initGame() {
buildBoard();
renderBoard(gMineSweeper);
countMines(gMineSweeper);
//setMinesNeighborsCount(gMineSweeper);
}
function buildBoard() {
var elCell = document.querySelectorAll ('td');
for (var i = 0; i < gLevel.SIZE; i++) {
gMineSweeper.push([]);
for (var j = 0; j < gLevel.SIZE; j++) {
gMineSweeper[i][j] = getRandomCell();
}
}
}
function renderBoard(board) {
var elMineSweeperTable = document.querySelector('.mineSweeperTable');
var strHTML = '';
board.forEach(function (row) {
strHTML += '<tr>';
row.forEach(function (cell) {
strHTML += '<td> ' + cell + ' </td>'
});
strHTML += '</tr>'
})
elMineSweeperTable.innerHTML = strHTML;
}
function countMines(board) {
var count = 0;
board.forEach(function(row) {
row.forEach(function(cell) {
if(cell === gMINE){
count++;
}
});
});
console.log('Mines Count : ' , count);
return count;
}
function cellClicked(elCell,i,j) {
var elCell = document.querySelectorAll ('td');
console.log('You Clicked on me ! : ' , elCell,i,j);
debugger;
}
function setMinesNeighborsCount(board) {
var elCell = document.querySelector('td');
// debugger;
// for (var i = 0; i < board; i++) {
// gMineSweeper.push([]);
// for (var j = 0; j < board; j++) {
// var ngbrsCount = countNgbrs(i, j);
// console.log('Cell ', i, ', ', j, ' has: ', ngbrsCount );
// if (ngbrsCount > 0) {
// debugger;
// board.push(ngbrsCount);
// // elCell.innerHTML = ngbrsCount;
// cell[i][j] = ngbrsCount;
// elCell = cell[i][j];
// }
// // debugger;
// if (cell === gMINE) {
// console.log('This cell is Mine', i, j);
// // debugger;
// // board.push(ngbrsCount);
// }
// }
// }
var c = elCell;
debugger;
board.forEach(function (row, i) {
row.forEach(function (cell, j) {
var ngbrsCount = countNgbrs(i, j);
console.log('Cell ', i, ', ', j, ' has: ', ngbrsCount );
if (ngbrsCount > 0) {
//board.push(ngbrsCount);
// elCell.innerHTML = ngbrsCount;
//debugger;
c[i][j] = ngbrsCount;
}
debugger;
if (cell === gMINE) {
console.log('This cell is Mine', i, j);
//debugger;
// board.push(ngbrsCount);
}
});
});
}
function countNgbrs(i, j) {
var count = 0;
for (var a = i-1; a <= i+1; a++){
if ( a < 0 || a >= gMineSweeper.length ) continue;
for (var b = j-1; b <= j+1; b++){
if ( b < 0 || b >= gMineSweeper.length ) continue;
if ( a === i && b === j ) continue;
if (gMineSweeper[a][b] === gMINE) count++;
}
}
return count;
}
2 个解决方案
解决方案1
0 2016-05-23 10:08:01
要使用jQuery从表标签获取位置
的HTML
<td onclick='Getposition($(this))'></td>
function Getposition(e){
var col = e.index() + 1;
var row = e.closest('tr').index() + 1;
alert( [col,row].join(',') );
}
解决方案2
0 2016-05-23 12:39:34
function cellClicked(el) {
document.querySelector('.mineTable').onclick = function(){
var el = event.target;
console.log('td clicked' , el);
debugger;
if(el.innerText === gMINE){
console.log('Game Over! ');
}
};
}
它的工作方式：）
如何获取JavaScript创建的动态表的CSS属性？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.