Question

I’m looking for a way to make a grid (for now using Table, but soon in div).
Let’s sais I click on the first cell (x,y = 1,-1) I want the background color to change for 2 cells width and 3 cells height. (Total of 6 cells changed)…

If it’s easier to do it using div, go ahead… using jQuery please! 🙂

I really don’t know how to do this and if someone can put me on the path or give me a code that should do it… or better, a tutorial XD…

I really appreciate your help, 100 times thanks

EDIT:

What i’m trying to do actually here is an invisible grod make a system comparable to rts-like games, where the building is transparent and follow the mouse but it’s attached to the grid when you move, and on clikc the bulding is droped (no transparency)… Explaining this just so you can have a little visual here.

Answer 1

The following is for div (as it’s the long term goal):

Firstly, I made a little markup that will be like a sort of table.

The html is:

<div id="overall">
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>   
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>       
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>    
    </div>   
</div>

With the following css:

.row{
    height:25px;
}
.cell{
    width:25px;
    height:100%;
    display:inline-block;
    border:1px solid black;
}

So it has a table like display (it’s a bunch of row composed of cells, cells in a same column share a class).

To do what you want, it looks like you’ll need to associate a click function to each .cell.

To do so is easy, using $(".cell").click(function(){});

Now, it’s time to complete the function.

Now the next step is coloring the cell you’ll need to color. To add the coloration we’ll use a special class (this way we can change more things easily):

.clickedCell{
    background:red;
}

The hardest part is to select the 6 cells. Numerous way can be used (for example we could have a grid of id like A1, A2, B1, B2 and select them using id) and the efficiency/design depends heavily on the markup you’ll have for your divs.

The way I’d do that is the following:

• Retrieving the class of the column of my cell :

  var cl=$(this).attr("class");
  var col="."+/col\d/.exec(cl)[0];
  

• Retrieving the parent of current div var parent=$(this).parent();

• Making a jQuery object containing the 3 cells in the current colomn:

  listOfCell=$(this);
  listOfCell=listOfCell.add(parent.next().children(col));
  listOfCell=listOfCell.add(parent.prev().children(col));
  

  Note that the add function returns a new collection, thus we need to assign the return value.

• Adding the 3 next cells to that object listOfCell=listOfCell.add(listOfCell.next());

• Adding the class listOfCell.addClass("clickedCell");

And it’s over 🙂

A working example here: http://jsfiddle.net/KZFzd/1/

Note that:

• As said before, the function depends heavily on the markup used.
• The example does not handle the deletion of previously selected cells. It’s easy and left as an exercise to the reader.
• It does not handle the special case of the cells on the side, it just change the background of the cell that would be changed if the grid was greater. This case is left as an exercise to the reader.
• It does not check the existence of next/previous parents because jQuery returns an empty jQuery object when nothing matches, and therefore, methods can be called on it, even if it has no effects.
• The example can be compacted in many ways, but is left as is for readability purposes.

Hope that helps.

EDIT:
In order to answer to your comment, the new fiddle to handle a specified size: http://jsfiddle.net/KZFzd/3/

I added two input that let you specify the size. You’ll probably need to change that in your code :).

I also added the class removal to clean the display.

So the two main change are that now, we’re using two for loops to add cells. And the clicked cell is the top left corner of the rectangle.

• the first one:

  for (i=1;i<y;i++){
     listOfCell=listOfCell.add(par.children(col));
     par=par.next();
  }
  

  It’s just iterating from one parent to another to reach the desired height. (and the first parent assignation is now the next one directly. par=$(this).parent().next()

• the second one:

  for (i=1;i<x;i++){
      listOfCell=listOfCell.add(listOfCell.next());
  }
  

  It’s just iterating to add the next elements to reach the desired width.

Note that:

• We’re using the fact that there are no double in a jQuery list in the width.
• We’re iterating starting from 1 and not 0, because our starting listOfCell is already a 1*1 cell
• You can easily start from others corner if you change the use of next() to prev() in one loop or/and the other.
• It still does not handle the side cases.