使用箭头键导航两个带有输入文本的HTML表格

在我的previous post上，我问了如何使用箭头键导航表格单元格。现在我正在尝试创建另一个与第一个表相同的表。使用箭头键导航两个带有输入文本的HTML表格

如何实现这一目标？

这是我到目前为止。

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>

请参阅此链接样本演示。

DEMO HERE

来源

2016-11-25 x' tian

当你到达第一个表的结尾时，你想要继续在第二个表中导航？ – tejashsoni111

经过一番出汗研究，它得到了适当的解决方案。由于我们无法点击任何其他表的TD，因此我们需要更改找到td索引的方式。

目前，它是为：

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

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

下面的代码有助于找出TD的精确索引，其中，目前的重点是：

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

虽然它看起来简单的线条..有点庞大的科研使其小...

Working DEMO

来源

2016-11-25 09:40:38 Vikrant

@ x'tian，是困难和耗时..所以张贴为新的答案✍（◔◡◔）...让我知道如果它*杀死*问题.. – Vikrant

这样的天才骗局！谢谢你的哥们。这么晚才回复很抱歉。失去了两天的联系。 –

嗨，哥们我遇到了另一个问题，我试图禁用我的一些文本框。然后每次删除选中的单元格，然后尝试将其编辑为反弹到编辑的文本框。 –

替换为你的函数下面的代码，并检查：

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

检查更新演示：Click Here

来源

2016-11-25 06:48:18 RJParikh

无法点击第二张桌子..你确定，答案正在工作..？ – Vikrant

我用这个在最近的一个项目，它完美地工作：https://gist.github.com/krcourville/7309218

来源

2016-11-25 06:50:23 mayersdesign

发送表中$('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); 
}

现场演示idHere

片段实例

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{ 
 
\t font-weight:bold; 
 
} 
 

 
input:focus { 
 
\t outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table border="1" id="navigate"> 
 
\t <thead> 
 
\t \t \t <th> CELL 1</th> 
 
\t \t \t <th> CELL 2</th> 
 
\t \t \t <th> CELL 3</th> 
 
\t \t \t <th> CELL 4</th> 
 
\t \t \t <th> CELL 5</th> 
 
\t </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"> 
 
\t \t <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>

来源

2016-11-25 07:04:39

尝试THIS DEMO

如果两个表或不止于此......使用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(); 
}

UPDATE：

退格必须表现为它的功能，所以，在功能排除，

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

UPDATED DEMO

来源

2016-11-25 07:11:35 Vikrant

Ops。另一个问题是，当我键入所选单元格并尝试退格时，会删除我输入的所有内容？ –

嗯，这个问题......我怎么错过了！ – Vikrant

@ x'tian，结帐更新...这是帮助...你可以upvote和接受。 – Vikrant

使用箭头键导航两个带有输入文本的HTML表格

回答

相关问题