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

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() 选择最后一个(底行) .

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

现在我们知道是哪个 <tr>看看，所以我们继续寻找具体的<td>按索引，以便我们最终在正确的列中，对应于我们当前所在的列。这类似于我们找到 <table> 时的情况。按顶部的索引。

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

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

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

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

好了!