[英]Navigate Two HTML Table with input text using arrow key
在上一篇文章中 ,我问过如何使用箭头键浏览表格单元格。 现在,我正在尝试创建另一个表,该表的行为与第一个表相同。
如何实现呢?
这是我到目前为止的内容:
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>
请参考此链接以获取示例演示。
经过一番艰苦的研究,它找到了正确的解决方案。 由于我们无法在其他任何表的TD中单击:我们需要更改查找td
索引的方式。
当前为:
$(this).closest('table tbody').find('td').index(this);
这总是返回第一个表的td
索引。
下面的代码有助于找到当前焦点所在的TD的准确索引:
$('table td').index(this);
虽然看起来很简单,但是研究却使它变得那么小。
在 $('td').click
发送表 id
$('td').click(function() {
active = $(this).closest('table tbody').find('td').index(this);
var tableid=$(this).closest('table').attr('id');
console.log(tableid);
rePosition(tableid);
});
和更改函数 rePosition()
function rePosition(tableid) {
console.log(active);
$('.active').removeClass('active');
$('#'+tableid+' tbody tr td').eq(active).addClass('active');
$('#'+tableid+' tbody tr td').find('input').removeClass('textClass');
$('#'+tableid+' tbody tr td').eq(active).find('input').addClass('textClass');
$('#'+tableid+' tbody tr td').eq(active).find('input').select();
var input = $('#'+tableid+' tbody tr td').eq(active).find('input').focus();
scrollInView(tableid);
}
现场演示 在这里
片段示例
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); var tableid=$(this).closest('table').attr('id'); console.log(tableid); rePosition(tableid); }); 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(tableid) { console.log(active); $('.active').removeClass('active'); $('#'+tableid+' tbody tr td').eq(active).addClass('active'); $('#'+tableid+' tbody tr td').find('input').removeClass('textClass'); $('#'+tableid+' tbody tr td').eq(active).find('input').addClass('textClass'); $('#'+tableid+' tbody tr td').eq(active).find('input').select(); var input = $('#'+tableid+' tbody tr td').eq(active).find('input').focus(); scrollInView(tableid); } function scrollInView(tableid) { var target = $('#'+tableid+' 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.9.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 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>
试试这个演示
如果有两个或更多表...使用Class
识别所有表
我已经编写了class="tblnavigate"
以在Javascript中调用表格单元格。
因此,重新定位函数如下所示:
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();
}
更新:
退格键必须具有其功能,因此,在keydown
函数中将其排除为
if ((!(/[a-zA-Z0-9-_ ]/.test(inp) || e.keyCode == 96)) && e.keyCode != 8){ ... }
用下面的代码替换您的函数并检查:
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;
}
}
检查更新的演示: 单击此处
我在最近的项目中使用了它,并且效果很好: https : //gist.github.com/krcourville/7309218
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.