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)一起使用，如果没有，请移至下一个或上一个{{1}中的相应单元格1}}而不是。

table

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

请注意，现在，这仅适用于彼此叠加的多个表格，而不是并排。如果您需要并排，可以复制我为密钥$(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(); } }); });和40所做的操作，并将其修改为适用于38和39。

希望它有所帮助。

进一步说明

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

首先，我们找到了我们当前所在的表格。这是通过选择器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) + ')')

现在我们已将当前位置放在上方，我们首先查找所有{{1}，找到包含<tr>的最后一个<td>元素}，然后使用<td>向上移动到其父<tr>，最后用.parent()选择最后一个（底行）。

.last()

现在我们知道要查看哪个.find('tbody tr td').parent().last()，因此我们继续前进并按索引查找特定的<tr>，以便我们最终在右列中，对应于我们当前的列这与我们在顶部找到<td>索引的时候类似。

<table>

最后，我们现在拥有正确的.find('td:eq(' + $(this).closest('td').index() + ')')元素，现在剩下的就是找到非{2}的<td>或<input>。我们只需选择它们就可以做到这一点

<textarea>

现在我们知道上面的表格在哪里移动了。由于我们将.find('input[type="text"]:not([readonly]),textarea');设置为此新元素，剩下的就是将焦点移到t。

你有它！

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>

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

2 个答案: