使用箭头键在输入文本中导航两个HTML表

在我之前的post中 ，我询问了如何使用箭头键导航表格单元格。 现在我正在尝试创建另一个与第一个表现相同的表。

怎么做到这一点？

这是我到目前为止：

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  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; } 

  
 
 
 CELL 1
 
 CELL 2
 
 CELL 3
 
 CELL 4
 
 CELL 5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

  

请参阅此链接以获取示例演示。

在这里演示

Answer 1

经过一番冒汗的研究后，它得到了正确的解决方案。 因为我们无法在任何其他表的TD中单击：我们需要更改找到td索引的方式。

目前它是这样的：

 $(this).closest('table tbody').find('td').index(this); 

这总是返回第一个表td索引。

下面的代码有助于找到当前焦点为的TD的精确索引：

 $('table td').index(this); 

虽然它看起来很简单……但是巨大的研究让它变得那么小……

工作演示

Answer 2

在 $('td').click 发送表 id $('td').click

 $('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; } 

  
 
 
 CELL 1
 
 CELL 2
 
 CELL 3
 
 CELL 4
 
 CELL 5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

  

Answer 3

试试这个演示

如果两个表或更多…使用Class来标识所有表

我写了class="tblnavigate"来调用Javascript中的表格单元格。

因此，重新定位function如下：

 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(); } 

更新：

退格必须像它的function一样，在keydown函数中将其排除为，

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

更新的演示

Answer 4

用以下代码替换您的函数并检查：

 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; } } 

检查更新的演示： 单击此处

Answer 5

我在最近的一个项目中使用了这个，它运行得很好： https ： //gist.github.com/krcourville/7309218