Question: I Would like to change the color of the next cell in the table by pressing a button.

For example: If the left button is pressed the color of the next cell in the left will change from white to red and the actual cells color will change from red to white and so on.

In this way we have the illusion that the red square i moving by pressing a button.

Is it possible to do this with Jquery and CSS?

![enter image description here](https://i.stack.imgur.com/6mgdI.png)

Answer: 
As a full example:

**HTML:**

```
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<button id="left">Left</button>
<button id="right">Right</button>
<button id="up">Up</button>
<button id="down">Down</button>

```

**JavaScript / jQuery:**

```
var position = 0;

$("#left").click(function() {
   position = position -1;
    setCurrentPosition();
});

$("#right").click(function() {
   position = position + 1;    
   setCurrentPosition();
});

$("#up").click(function() {
   position = position -4;
    setCurrentPosition();
});

$("#down").click(function() {
   position = position + 4;    
   setCurrentPosition();
});

function setCurrentPosition() {
    $(".selected").removeClass();
    $("table td").each(function(value) {
        if (value == position) {
            $(this).addClass("selected");
        }
    });
}

```

**CSS:** 

```
table td {
    border: 1px solid black;
    padding: 30px;
}

.selected {
    background-color: red;    
}

```

<http://jsfiddle.net/nzRxu/>
Sure you can here is the whole example now how i think this should be done

<http://jsfiddle.net/puEbp/2/>

HTML

```
<table>
<tr>
    <td class="red"></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>
<button id="leftButton">left</button>
<button id="rightButton">right</button>
<button id="downButton">down</button>
<button id="upButton">up</button>

```

JavaScript 

```
$(function(){
$('#rightButton').on('click', function(e){
    e.preventDefault();
    var actualTD = $('td.red');
    if (actualTD.next('td').length > 0) {
        actualTD.next('td').addClass('red');
        actualTD.removeClass('red');
    }        
});
$('#leftButton').on('click', function(e){
    e.preventDefault();
    var actualTD = $('td.red');
    if (actualTD.prev('td').length > 0) {
        actualTD.prev('td').addClass('red');
        actualTD.removeClass('red');
    }        
});    
$('#downButton').on('click', function(e){
    e.preventDefault();
    var actualTD = $('td.red'),
        actualParentTD = actualTD.parent('tr'),
        index = actualTD.index();

    if (actualParentTD.next('tr').length > 0) {
        actualParentTD.next('tr').find('td:eq('+index+')').addClass('red');
        actualTD.removeClass('red');
    }        
});
$('#upButton').on('click', function(e){
    e.preventDefault();
    var actualTD = $('td.red'),
        actualParentTD = actualTD.parent('tr'),
        index = actualTD.index();

    if (actualParentTD.prev('tr').length > 0) {
        actualParentTD.prev('tr').find('td:eq('+index+')').addClass('red');
        actualTD.removeClass('red');
    }        
});
});

```

CSS

```
table td{
border: 2px solid gray;
width: 50px;
height: 50px;
}
.red{
background: red;
}

```