按下按钮即可更改表格单元格的颜色

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?

Answer 1

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/

Answer 2

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;
}