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

Question

我想通过按下按钮来更改表格中下一个单元格的颜色。

例如：如果按下左按钮，则左下一个单元格的颜色将从白色变为红色，而实际单元格的颜色将从红色变为白色，依此类推。

通过这种方式，我们有一种幻想，就是我按下按钮会移动红色方块。

是否可以使用Jquery和CSS做到这一点？

Answer 1

举一个完整的例子：

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

当然您可以在这里找到整个示例，我认为应该怎么做

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