x'tian x'tian - 9 days ago 5
CSS Question

Navigate Two HTML Table with input text using arrow key

On my previous post, I asked how to navigate a table cell using an arrow key. And now I'm trying to create another table that will behave same with the first one.

How to achieve this?

Here is what I have so far.



var active = 0;
//$('#navigate td').each(function(idx){$(this).html(idx);});
rePosition();

$(document).keydown(function(e) {
var inp = String.fromCharCode(event.keyCode);
if (!(/[a-zA-Z0-9-_ ]/.test(inp) || event.keyCode == 96)){
reCalculate(e);
rePosition();
// if key is an arrow key, don't type the user input.
// if it is any other key (a, b, c, etc)
// edit the text
if (e.keyCode > 36 && e.keyCode < 41) {
return false;
}
}
});

$('td').click(function() {
active = $(this).closest('table tbody').find('td').index(this);
rePosition();
});


function reCalculate(e) {
var rows = $('#navigate tbody tr').length;
var columns = $('#navigate tbody tr:eq(0) td').length;
var temp;

if (e.keyCode == 37) { //move left or wrap
temp = active;
while (temp > 0) {
temp = temp - 1;
// only advance if there is an input field in the td
if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
active = temp;
break;
}
}
}
if (e.keyCode == 38) { // move up
temp = active;
while (temp - columns >= 0) {
temp = temp - columns;
// only advance if there is an input field in the td
if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
active = temp;
break;
}
}
}
if (e.keyCode == 39) { // move right or wrap
temp = active;
while (temp < (columns * rows) - 1) {
temp = temp + 1;
// only advance if there is an input field in the td
if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
active = temp;
break;
}
}
}
if (e.keyCode == 40) { // move down
temp = active;
while (temp + columns <= (rows * columns) - 1) {
temp = temp + columns;
// only advance if there is an input field in the td
if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
active = temp;
break;
}
}
}
}

function rePosition() {
console.log(active);
$('.active').removeClass('active');
$('#navigate tbody tr td').eq(active).addClass('active');
$('#navigate tbody tr td').find('input').removeClass('textClass');
$('#navigate tbody tr td').eq(active).find('input').addClass('textClass');
$('#navigate tbody tr td').eq(active).find('input').select();
var input = $('#navigate tbody tr td').eq(active).find('input').focus();
scrollInView();
}

function scrollInView() {
var target = $('#navigate tbody tr td:eq(' + active + ')');
if (target.length) {
var top = target.offset().top;

$('html,body').stop().animate({
scrollTop: top - 100
}, 400);
return false;
}
}

td.active{
border:2px solid #2c3e50;
font-weight:bold;
background-color:#ddd;
}

.textClass{
font-weight:bold;
}

input:focus {
outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table border="1" id="navigate">
<thead>
<th> CELL 1</th>
<th> CELL 2</th>
<th> CELL 3</th>
<th> CELL 4</th>
<th> CELL 5</th>
</thead>
<tbody>
<tr>
<td><input type="text" value="CELL 1" /></td>
<td><input type="text" value="CELL 2" /></td>
<td><input type="text" value="CELL 3" /></td>
<td><input type="text" value="CELL 4" /></td>
<td><input type="text" value="CELL 5" /></td>
</tr>
<tr>
<td><input type="text" value="CELL 1" /></td>
<td><input type="text" value="CELL 2" /></td>
<td><input type="text" value="CELL 3" /></td>
<td><input type="text" value="CELL 4" /></td>
<td><input type="text" value="CELL 5" /></td>
</tr>
<tr>
<td><input type="text" value="CELL 1" /></td>
<td><input type="text" value="CELL 2" /></td>
<td><input type="text" value="CELL 3" /></td>
<td><input type="text" value="CELL 4" /></td>
<td><input type="text" value="CELL 5" /></td>
</tr>
<tr>
<td><input type="text" value="CELL 1" /></td>
<td><input type="text" value="CELL 2" /></td>
<td><input type="text" value="CELL 3" /></td>
<td><input type="text" value="CELL 4" /></td>
<td><input type="text" value="CELL 5" /></td>
</tr>

</tbody>
</table>

<br><br>

<table border="1" id="table2">
<tr>
<td><input type="text" value="CELL 1" /></td>
<td><input type="text" value="CELL 2" /></td>
<td><input type="text" value="CELL 3" /></td>
<td><input type="text" value="CELL 4" /></td>
<td><input type="text" value="CELL 5" /></td>
</tr>
<tbody>
<tr>
<td><input type="text" value="CELL 1" /></td>
<td><input type="text" value="CELL 2" /></td>
<td><input type="text" value="CELL 3" /></td>
<td><input type="text" value="CELL 4" /></td>
<td><input type="text" value="CELL 5" /></td>
</tr>
<tr>
<td><input type="text" value="CELL 1" /></td>
<td><input type="text" value="CELL 2" /></td>
<td><input type="text" value="CELL 3" /></td>
<td><input type="text" value="CELL 4" /></td>
<td><input type="text" value="CELL 5" /></td>
</tr>
<tr>
<td><input type="text" value="CELL 1" /></td>
<td><input type="text" value="CELL 2" /></td>
<td><input type="text" value="CELL 3" /></td>
<td><input type="text" value="CELL 4" /></td>
<td><input type="text" value="CELL 5" /></td>
</tr>
<tr>
<td><input type="text" value="CELL 1" /></td>
<td><input type="text" value="CELL 2" /></td>
<td><input type="text" value="CELL 3" /></td>
<td><input type="text" value="CELL 4" /></td>
<td><input type="text" value="CELL 5" /></td>
</tr>

</tbody>
</table>





Please refer to this link for the sample demo.

DEMO HERE

Answer

Try THIS DEMO

If two tables or more than that... use Class to identify all of them

I have written class="tblnavigate" to call in table cells in Javascript.

So, reposition function looks like:

function rePosition() {
    console.log(active);
    $('.active').removeClass('active');
    $('.tblnavigate tbody tr td').eq(active).addClass('active');
    $('.tblnavigate tbody tr td').find('input').removeClass('textClass');
    $('.tblnavigate tbody tr td').eq(active).find('input').addClass('textClass');
    $('.tblnavigate tbody tr td').eq(active).find('input').select();
    var input = $('.tblnavigate tbody tr td').eq(active).find('input').focus();
    scrollInView();
}

UPDATE:

The backspace must behave as it's functionality so, exclude it in keydown function as,

if ((!(/[a-zA-Z0-9-_ ]/.test(inp) || e.keyCode == 96)) && e.keyCode != 8){ ... }

UPDATED DEMO

Comments