我想通过按下按钮来更改表格中下一个单元格的颜色。
例如:如果按下左键,左侧下一个单元格的颜色将从白色变为红色,实际单元格颜色将从红色变为白色,依此类推。
通过这种方式我们可以通过按下按钮来移动红色方块。
是否可以使用Jquery和CSS执行此操作?
答案 0 :(得分:3)
作为一个完整的例子:
<强> 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;
}
答案 1 :(得分: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;
}