Grid Sizer with jQuery

Question

I'm writing myself a little game in JavaScript, using jQuery. The game has a board, with cells in it, much like Minesweeper: the user clicks a cell, and its data needs to be changed in some way. Each cell is presented by a simple image, but has some more data associated with it.

What I mostly need is, when the user clicks a cell, I have to somehow determine the row and column which was clicked, manipulate the data appropriately and change the view.

On one hand, setting the click handler on every individual cell seems like an overkill, but if you set the click handler on the whole table, it becomes PITA to determine which table cell was clicked.

How would you handle such a situation? Maybe there is a plugin already that can simplify the whole thing?

Answer 1

add the click handler on the whole table. use event.target to get the clicked cell. add an attribute to each cell that will tell you what row/col it is, that way you dont have to run any massive/heavy JS to figure it out.

psuedocode:

$("table.game").click(function(e){
  var cell = e.target;
  var pos = $(cell).attr("name").split["_"];
  var x = pos[0];
  var y = pos[1];
  return false;
});

markup:

<table class="game">
  <tbody>
  <tr>
   <td name="0_0">
     sdfasdfa
   <td>
  </tr>
  </tbody>
</table>

note: having a name start with a digit isnt good, so fix as needed

Answer 2

If your table is generated dynamically (js or php for instance) you could have each cell with a class and / or id attributes that gave you the information.

I don't know how you represent your cells so in pseudo code :

<table id="board">
  <row>
    <cell id="cell-0x0" />
    <cell id="cell-0x1" />
    ...
  </row>
  <row>
    <cell id="cell-1x0" />
    ...
  </row>
  ...
</table>

Then in jQuery :

$('#board cell').click(function(){
  var coord = $(this).attr('id').substr(5).split('x');
  // do your stuff
});

Answer 3

Hello,

If you have too many table cells setting the click handlers would be heavy, but you can make a workaround to calculate the box number from mouse click's event.page.X and event.page.Y this will give coordinatesof clicked pixel on your screen and you can calculate which box is under that pixel.

Or

You can also use event.target the get the node clicked.

check out jquery.event.

hope it helps, Sinan.

Answer 4

This is a perfect example of a great use of the live() function. To find the x and y positions you just need to count the number of cells before or rows above this one:

$('#minesweeperTable td').live('click', function() {
    var $this = $(this),
        xPos = $this.prevAll('td').length,
        yPos = $this.closest('tr').prevAll('tr').length
    ;
    // your code here
});

The best thing about this is that no matter how many cells you have, there's only one event handler which makes for much better performance.

Answer 5

The click event bubbles and the original target can be found in the srcElement property of the event object (I think, or it might be another property, but it's there).