按下按鈕改變表格單元格顏色

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