JSFiddle - React, Tailwind, and code Playground
by wirey00
HTML
<table border="1" id="navigate">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
...CSS
td.active{
border:1px solid blue;font-weight:bold;color:yellow;background-color:red}
td{padding:5px;text-align:center}JavaScript
var active = 0;
$('#navigate td').each(function(idx) {
$(this).html(idx);
});
//rePosition();
$(document).keydown(function(e) {
reCalculate(e);
// rePosition();
return false;
});
$('table').delegate('td', 'click', function() {
$('.active').removeClass('active');
$(this).addClass('active');
scrollInView();
var top = $(this).offset().top;
$('html,body').stop().animate({
scrollTop: top - 100
}, 400);
return false;
});
function reCalculate(e) {
var rows = $('#navigate tr').length;
var columns = $('#navigate tr:eq(0) td').length;
//alert(columns + 'x' + rows);
if (e.keyCode == 37) { //move left or wrap
active = (active > 0) ? active - 1 : active;
}
if (e.keyCode == 38) { // move up
active = (active - columns >= 0) ? active - columns : active;
}
if (e.keyCode == 39) { // move right or wrap
active = (active < (columns * rows) - 1) ? active + 1 : active;
}
if (e.keyCode == 40) { // move down
active = (active + columns <= (rows * columns) - 1) ? active + columns : active;
}
}
function scrollInView() {
}