按下按钮改变表格单元格颜色

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