如何在<td>和& lt; tr>元素

how to traverse between <td> and <tr> element?

本文关键字：lt tr 元素 td      更新时间：2023-09-26

下面是一个html表格结构:

<table>     
    <tr><td>ABC</td></tr>
    <tr>
        <td><input class="inp"/></td>
        <td><input class="inp"/></td>
    </tr>
    <tr><td><input class="inp"/></td></tr>
    <tr><td><input class="inp"/></td></tr>
</table>
<button id="btn">Click me</button>

然后我的目的是让焦点总是去下一个输入字段在类"inp"按钮点击。下面是我的脚本:

var focused = null;
$(".inp").focus(function () {
    focused = $(this);
}).first().focus();
$("#btn").click(function(e){
     if (focused && focused.length) { 
        //this only works horizontally. 
        focused.parent().next().find(".inp").focus();
        // this only works vertically. 
        //focused.closest("tr").next().find(".inp").focus();
     }
});

我想聚焦第一行最后一个元素之后的第二行。如何把这两个表述结合起来?

您可以通过在所有输入元素的包装集上使用JQuery .index()和.eq()函数来实现这一点。

当焦点位于最后一个输入并且按钮被单击时，将焦点移回第一个输入。

$(function() {
    var $inputs = $('.inp');
    var index = null;
    $inputs.focus(function() {
        index = $inputs.index($(this));
    });
    $inputs.first().focus();
    $('#btn').click(function(e) {
         if (index != null) {
             index = (index + 1) % $inputs.length;
             $inputs.eq(index).focus();
         }
    });
});

jsfiddle

这个版本不会将焦点包装回第一个输入。

$('#btn').click(function(e) {
     if (index != null) {
         if ((index + 1) < $inputs.length) {
             $inputs.eq(index + 1).focus();
         }
     }
});

jsfiddle

试试这个:

<table>
<tr>
    <td>ABC</td>
</tr>
<tr>
    <td>
        <input class="inp" />
    </td>
    <td>
        <input class="inp" />
    </td>
</tr>
<tr>
    <td>
        <input class="inp" />
    </td>
</tr>
<tr>
    <td>
        <input class="inp" />
    </td>
</tr>
</table>
<button id="btn">Click me</button>

JS 

// initial just focus on first input
$('.inp').first().focus();
// get all input
var all = $('.inp');
// get first input index and add one number for next focus
var index = (all.index(all.first()) + 1);
$('#btn').click(function () {
  // if length of input same with current index
  // defined into 0, (goes bact to first input)
  // if does't wanna go back just remove this line
  if (index == all.length) index = 0;
  // focus next input
  all.eq(index).focus();
  index++;
});

这段代码看起来有点讨厌，但它会为你完成工作:D

$(document).ready(function() {
 var focused = null;
 $(".inp").focus(function() {
     focused = $(this);
 }).first().focus();
 $("#btn").click(function(e) {
     if (focused && focused.length) {
         if ($(focused).closest('tr').find('td').length > 1 && $(focused).closest('td').next().length != 0) {
             $(focused).closest('td').next().find('.inp').focus();
         } else {
             $(focused).closest('tr').next().find('.inp').focus();
         }
     }
 });
});

这是Plunker: http://plnkr.co/edit/Nm3wETpltRo6i7mAXPtj?p=preview

我有一个小提琴，它跳跃索引，直到你到达最后一个。如果你愿意，你也可以修改它，使其也向后。

http://jsfiddle.net/gyebua9e/

$('.inp').first().focus();
var index   = 0;
var $inputs = $('.inp').length;
$('#btn').click(function() {
   index += 1;
   $('.inp').eq(index).focus();
});

对不起，这有点令人困惑，你想通过点击在输入字段之间跳转来完成什么?

也只是试图总是去下一个输入无论包装是什么?所以如果我点击第二个输入，它会转到第三个输入，如果我点击第一个输入，它会转到第二个输入?等

相关文章：