如何使用箭头键在不同表之间导航文本框？

Question

我有以下代码，它正在文本框之间导航，但问题是它只在一个表中导航，但在我的页面中有不同的表。 如何使它工作？

$('input[type="text"],textarea').keyup(function(e){
    if(e.which==39 || e.which==13)
        $(this).closest('td').next().find('input[type="text"],textarea').focus();
    else if(e.which==37 || e.which==8)
        $(this).closest('td').prev().find('input[type="text"],textarea').focus();
    else if(e.which==40 || e.which==13)
        $(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input[type="text"],textarea').focus();
    else if(e.which==38 || e.which==8)
        $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input[type="text"],textarea').focus();
});




    <form>
   <table width="960" align="center" cellspacing="20" cellpadding="15" id="navigate"> 
            <thead>                 
                <th align="center"></th>
                <th align="center"></th>
                <th align="center"></th>
                <th align="center"></th>
            </thead>
            <tbody>
            <tr>
            <td colspan="4" style="font-size:15px;"><b>ADVERTISING:</b></th>
            </tr>
            <tr>
            <th></th>
                <th align="center">DOMESTIC($)</th>
                <th align="center">INTERNATIONAL($)</th>
                <th align="center">NOTES</th>
                </tr>
                <tr>
                    <td class="spending_table_title" title="<?php echo $this->data[14]->content; ?>"><span style="text-transform: uppercase;"><?php echo $this->data[13]->content; ?></span></td>
                    <td ><input type="text" value="" name="actual_marketing_dom_print" id="actual_marketing_dom_print"  size="30" style="height:20px; width:155px;" onChange="total_dom_advt();total_marketing_spending();format(this);"/> </td>
                    <td ><input type="text" value="" name="actual_marketing_intl_print" id="actual_marketing_intl_print"  size="30" style="height:20px; width:155px; " onChange="total_intl_advt();total_marketing_spending();format(this);"/></td>
                    <td ><textarea name="actual_marketing_print_notes"  id="actual_marketing_print_notes" style="height:32px; width:300px;" rows="3" cols="20"  class ="notes"> </textarea></td>
                </tr>


                </tbody>
                </table>
                </div>
                 <br>

         <br>         

         <div class="divgrid">

         <table width="960" align="center" cellspacing="20" cellpadding="15" id="navigate"> 
            <thead>
                <th style="width:60%;"></th>
                <th></th>
                <th></th>
            </thead>
            <tbody>
            <tr>
            <td colspan="3" style="font-size:15px;font-weight:bold;">TOTAL PRESS AND PUBLIC RELATIONS (DOMESTIC AND INTERNATIONAL COMBINED):</td>
            </tr>
            <tr>
            <th></th>
            <th align="center">$</th>
            <th align="center">NOTES</th>
            </tr>
                <tr>
                    <td  class="spending_table_title" title="<?php echo $this->data[31]->content; ?>"><span style="text-transform: uppercase;"><?php echo $this->data[30]->content; ?></span></td>

               <td ><input type="text" value="" name="actual_marketing_industry_relations" id="actual_marketing_industry_relations"  size="30" style="height:20px; width:155px; " onChange="total_press_public();total_marketing_spending();format(this);"/></td>
                    <td ><textarea name="actual_marketing_industry_relations_notes"  id="actual_marketing_industry_relations_notes" style="height:32px; width:300px;" rows="3" cols="20" class ="notes"> </textarea></td>
                </tr>


            </tbody>
         </table>
</form>

在我的代码中我有两个表，在完成一个表中的文本框之后我没有表导航到下一个表文本框，我不知道怎么做

Answer 1

有趣的问题，希望你会发现这很有帮助。

我在这里做的是检查上面或下面是否input if (t.length == 0) ，如果没有，则转移到下一个或上一个table的相应单元格。

$(document).ready(function () {
    $('input[type="text"],textarea').keyup(function (e) {
        if (e.which == 39) {
            $(this).closest('td').next().find('input[type="text"],textarea').focus();
        } else if (e.which == 37) {
            $(this).closest('td').prev().find('input[type="text"],textarea').focus();
        } else if (e.which == 40) {
            var t = $(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input[type="text"],textarea');
            if (t.length == 0) {
                t = $(document).find('table:eq(' + ($('table').index($(this).closest('table')) + 1) + ')').find('tbody tr td').parent().first().find('td:eq(' + $(this).closest('td').index() + ')').find('input[type="text"]:not([readonly]),textarea');
            }
            t.focus();
        } else if (e.which == 38) {
            var t = $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input[type="text"],textarea');
            if (t.length == 0) {
                t = $(document).find('table:eq(' + ($('table').index($(this).closest('table')) - 1) + ')').find('tbody tr td').parent().last().find('td:eq(' + $(this).closest('td').index() + ')').find('input[type="text"]:not([readonly]),textarea');
            }
            t.focus();
        }
    });
});

http://jsfiddle.net/zxTfb/5/

请注意，现在，这仅适用于彼此叠加的多个表，而不是并排。 如果您需要并排使用它们，您可以复制我为键40和38所做的操作，并将其修改为适用于39和37 。

希望能帮助到你。

进一步说明

让我们分解这行代码并查看内部工作原理：

t = $(document).find('table:eq(' + ($('table').index($(this).closest('table')) - 1) + ')').find('tbody tr td').parent().last().find('td:eq(' + $(this).closest('td').index() + ')').find('input[type="text"]:not([readonly]),textarea');

首先，我们发现，我们目前在这与选择做了一个上表。 :eq()它选择的元素， table ，通过它的指数在这种情况下。 我们选择table以我们现在的表的索引-1得到上面的表格。

$(document).find('table:eq(' + ($('table').index($(this).closest('table')) - 1) + ')')

现在，我们有我们上面的当前位置的表，我们发现在过去<tr> 不会包含元素的<td>首先寻找所有<td>然后向上移动到它的父<tr>与.parent()最后用.last()选择最后一行（底行.last() 。

.find('tbody tr td').parent().last()

现在我们知道要查看哪个<tr> ，所以我们继续前进并按索引查找特定的<td> ，以便我们最终在右列中，对应于我们当前所在的列。这类似于何时我们在顶部找到了索引的<table> 。

.find('td:eq(' + $(this).closest('td').index() + ')')

最后，我们现在有了正确的<td>元素，现在剩下的就是找到非readonly的<input>或<textarea> 。 我们只需选择它们就可以做到这一点

.find('input[type="text"]:not([readonly]),textarea');

现在我们知道上面的表格在哪里移动了。 由于我们将t设置为这个新元素，剩下的就是用t.focus()移动焦点。

你有它！

Answer 2

这个怎么样？

使用全局计数器为输入分配ID。 然后，由于您知道触发事件的ID，您只需添加或减去该ID即可获取您应该访问的新ID。 这是一些代码：

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
  console.log("hej");
  $('input[type="text"],textarea').keyup(function(e){
    if(e.which==39 || e.which==13) {
        var thisId = parseInt(this.id);
        $("#" + (thisId + 1)).focus();
    } else if(e.which==37 || e.which==8) {
        var thisId = parseInt(this.id);
        $("#" + (thisId - 1)).focus();
    } else if(e.which==40 || e.which==13) {
        var thisId = parseInt(this.id);
        $("#" + (thisId + 4)).focus();
    } else if(e.which==38 || e.which==8) {
        var thisId = parseInt(this.id);
        $("#" + (thisId - 4)).focus();
    }
  });
});
</script>
</head>
<body>

 <form>
<table>

 <tr>
  <td><input type="text" id="1" name="5"></td>
  <td><input type="text" id="2" name="6"></td>
  <td><input type="text" id="3" name="7"></td>
  <td><input type="text" id="4" name="8"></td>


 </tr>

  <tr>
  <td><input type="text" id="5" name="5"></td>
  <td><input type="text" id="6" name="6"></td>
  <td><input type="text" id="7" name="7"></td>
  <td><input type="text" id="8" name="8"></td>


 </tr>
 <tr>
  <td><input type="text" id="9" name="5"></td>
  <td><input type="text" id="10" name="6"></td>
  <td><input type="text" id="11" name="7"></td>
  <td><input type="text" id="12" name="8"></td>


 </tr>

</table>

<table>
 <tr>
  <td><input type="text" id="13" name="5"></td>
  <td><input type="text" id="14" name="6"></td>
  <td><input type="text" id="15" name="7"></td>
  <td><input type="text" id="16" name="8"></td>


 </tr>

 <tr>
  <td><input type="text" id="17" name="5"></td>
  <td><input type="text" id="18" name="6"></td>
  <td><input type="text" id="19" name="7"></td>
  <td><input type="text" id="20" name="8"></td>


 </tr>

 <tr>
  <td><input type="text" id="21" name="5"></td>
  <td><input type="text" id="22" name="6"></td>
  <td><input type="text" id="23" name="7"></td>
  <td><input type="text" id="24" name="8"></td>


 </tr>

</table>

</form>
</body>
</html>