使用箭头键导航表单元格并忽略禁用的单元格 [英] Navigate table cell using arrow key and ignore disabled cell
本文介绍了使用箭头键导航表单元格并忽略禁用的单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表格，就像一个excel。允许用户使用箭头键导航整个表。但是当我试图禁用它的一些文本框，它仍然捕获禁用单元格，当我试图输入一个文本的值是添加在可编辑单元格。我如何能够解决这个问题？
I have a table that act like an excel. User are allowed to navigate entire table using arrow keys. But when I tried to disable some of its textboxs it is still capturing the disabled cell and when I tried to enter a text the value is adding on the editable cell. How can I able to resolve this? Thank you.
这是我到目前为止所有的。
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() {
$("#input1, #input3").prop("disabled", true);
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/2.1.1/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 id="input1" type="text" value="CELL 1" />
</td>
<td>
<input id="input2" type="text" value="CELL 2" />
</td>
<td>
<input id="input3" type="text" value="CELL 3" />
</td>
<td>
<input id="input4" type="text" value="CELL 4" />
</td>
<td>
<input id="input5" type="text" value="CELL 5" />
</td>
</tr>
<tr>
<td>
<input id="input1" type="text" value="CELL 1" />
</td>
<td>
<input id="input2" type="text" value="CELL 2" />
</td>
<td>
<input id="input3" type="text" value="CELL 3" />
</td>
<td>
<input id="input4" type="text" value="CELL 4" />
</td>
<td>
<input id="input5" type="text" value="CELL 5" />
</td>
</tr>
<tr>
<td>
<input id="input1" type="text" value="CELL 1" />
</td>
<td>
<input id="input2" type="text" value="CELL 2" />
</td>
<td>
<input id="input3" type="text" value="CELL 3" />
</td>
<td>
<input id="input4" type="text" value="CELL 4" />
</td>
<td>
<input id="input5" type="text" value="CELL 5" />
</td>
</tr>
<tr>
<td>
<input id="input1" type="text" value="CELL 1" />
</td>
<td>
<input id="input2" type="text" value="CELL 2" />
</td>
<td>
<input id="input3" type="text" value="CELL 3" />
</td>
<td>
<input id="input4" type="text" value="CELL 4" />
</td>
<td>
<input id="input5" type="text" value="CELL 5" />
</td>
</tr>
</tbody>
<table border="1" id="table2">
<tr>
<td>
<input type="text" id="inputb1" value="CELL 1" />
</td>
<td>
<input type="text" id="inputb2" value="CELL 2" />
</td>
<td>
<input type="text" id="inputb3" value="CELL 3" />
</td>
<td>
<input type="text" id="inputb4" value="CELL 4" />
</td>
<td>
<input type="text" id="inputb5" value="CELL 5" />
</td>
</tr>
<tbody>
<tr>
<td>
<input type="text" id="inputb1" value="CELL 1" />
</td>
<td>
<input type="text" id="inputb2" value="CELL 2" />
</td>
<td>
<input type="text" id="inputb3" value="CELL 3" />
</td>
<td>
<input type="text" id="inputb4" value="CELL 4" />
</td>
<td>
<input type="text" id="inputb5" value="CELL 5" />
</td>
</tr>
<tr>
<td>
<input type="text" id="inputb1" value="CELL 1" />
</td>
<td>
<input type="text" id="inputb2" value="CELL 2" />
</td>
<td>
<input type="text" id="inputb3" value="CELL 3" />
</td>
<td>
<input type="text" id="inputb4" value="CELL 4" />
</td>
<td>
<input type="text" id="inputb5" value="CELL 5" />
</td>
</tr>
<tr>
<td>
<input type="text" id="inputb1" value="CELL 1" />
</td>
<td>
<input type="text" id="inputb2" value="CELL 2" />
</td>
<td>
<input type="text" id="inputb3" value="CELL 3" />
</td>
<td>
<input type="text" id="inputb4" value="CELL 4" />
</td>
<td>
<input type="text" id="inputb5" value="CELL 5" />
</td>
</tr>
<tr>
<td>
<input type="text" id="inputb1" value="CELL 1" />
</td>
<td>
<input type="text" id="inputb2" value="CELL 2" />
</td>
<td>
<input type="text" id="inputb3" value="CELL 3" />
</td>
<td>
<input type="text" id="inputb4" value="CELL 4" />
</td>
<td>
<input type="text" id="inputb5" value="CELL 5" />
</td>
</tr>
</tbody>
</table>
推荐答案
根据需要，您可以使用
find('input:not(:disabled)')
这样，您可以跳过禁用单元格，并直接关注下一个启用的单元格。
示例：
With this, you can skip disabled cell and focus on next Enabled cell directly. Example:
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 ($('.tblnavigate tbody tr td').eq(temp).find('input:not(:disabled)').length != 0) {
active = temp;
break;
}
}
}
您想要明确关注已禁用单元，则可以使用鼠标单击。
And, if you want to explicitly focus on Disabled Cell, you can use Mouse Click for it.
这篇关于使用箭头键导航表单元格并忽略禁用的单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
