使用箭头键在每个td中使用输入文本浏览HTML表格 [英] Navigate HTML table with input text in every td using arrow key

问题描述

我有一个 HTML表格，每个 td 中都有输入文本。我试图创建一个功能，允许箭头键导航我的 td's 。

我想突出显示单击每个箭头键时所选单元格的值，就像标签的工作方式一样。有没有人在这里有一个想法如何实现这一目标？谢谢。

代码 Here

解决方案

您可以单独查找输入，并向 Active < 函数rePosition（） as，

  $（' #navigate tr td'）。find（'input'）。removeClass（'yourClassforText'）; 
 $（'＃navigate tr td'）。eq（active）.find（'input'）。addClass（'yourClassforText'）; 
 
 //在输入
 $（'＃navigate tr td'）。eq（active）.find（'input'）。select（）; 
  

旧的演示

更新

上面提到的另一个问题是，只删除选定的文本。

您需要在 keydown 事件上添加一个检查，

  var inp = String.fromCharCode（event.keyCode）; 
 if（！（/ [a-zA-Z0-9-_] /。test（inp）|| event.keyCode == 96））{
 //如果用户输入一些文本，忽视反对&重新计算事件
} 
  

更新演示

更新 - 2：

使用thead进行演示

I have an HTML table with input text in every td. I'm trying to create a function that will allow arrow keys to navigate my td's.

I want to highlight the value of the selected cell when every arrow key is clicked, just like how tab works. Does anyone here have an idea how to achieve this? Thank you.

Code Here

解决方案

You can find input separately, and add a class to Active input in function rePosition() as,

$('#navigate tr td').find('input').removeClass('yourClassforText');
$('#navigate tr td').eq(active).find('input').addClass('yourClassforText');

// to select text inside input
$('#navigate tr td').eq(active).find('input').select();

old Demo Here

Update

As mentioned another problem by Op, is to remove only selected text.
You need to add a check on a keydown event as,

var inp = String.fromCharCode(event.keyCode);
if (!(/[a-zA-Z0-9-_ ]/.test(inp) || event.keyCode == 96)){
    //if user is entering some text, neglect rePosition & reCalculate events
}

Updated Demo

Update - 2:

Demo with thead

这篇关于使用箭头键在每个td中使用输入文本浏览HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！