javascript - Change table cell color by pressing button -
i change color of next cell in table pressing button.
for example: if left button pressed color of next cell in left change white red , actual cells color change red white , on.
in way have illusion red square moving pressing button.
is possible jquery , css?
as 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; }
Comments
Post a Comment