How to get property of dynamic table

Question

I have some trouble with my project,

I need to build a game : Mine Sweeper,

My main problem in this project is that I have dynamic table in my html page that I build that matrix in my Javascript page,

I want to get the current cell I pushed it by onclick event and I only got the first cell (0,0):

It's my home work project , I only need help to understand how can I get the index of each cell I`ve been clicked on ,

my html page :

<body onload="initGame()">
    <header>
      <h1>My Mine Sweeper</h1>
    </header>

    <table class="mineTable" onclick="cellClicked(this)" border="1">
          <tbody class="mineSweeperTable" ></tbody>
    </table>

my javascript Page :

    'use strict';

var gMINE = '&#10057;';
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;
}

Answer 1

To get the postion of the from table tag using 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(',') );  
}

Example Fiddle http://jsbin.com/lupifilike/2/edit?html,js,output

Answer 2

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!  ');

    }
  };
}

its working that way :)

How to get property of dynamic table

Question

2 answers

solution1
0 2016-05-23 10:08:01

solution2
0 2016-05-23 12:39:34

How to get property of dynamic table

Question

2 answers

solution1 0 2016-05-23 10:08:01

solution2 0 2016-05-23 12:39:34

solution1
0 2016-05-23 10:08:01

solution2
0 2016-05-23 12:39:34