如何在之间移动 <td> 和 <tr> 元件？

Question

I have a html table structure below:

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

Then my purpose is let the focus always go to next the input field in class "inp" by button click. Here is my script:

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

I want to focus the second line after the last element in the first row. How do I combine those two statements?

Answer 1

Try this :

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>

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

DEMO

Answer 2

This code seems little nasty but it will do the job for you :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();

         }

     }
 });

});

And here is Plunker : http://plnkr.co/edit/Nm3wETpltRo6i7mAXPtj?p=preview

Answer 3

I have a fiddle that is jumping indexes until you reach the last one. If you want you can modify it to also go backwards.

http://jsfiddle.net/gyebua9e/

$('.inp').first().focus();

var index   = 0;
var $inputs = $('.inp').length;

$('#btn').click(function() {
   index += 1;
   $('.inp').eq(index).focus();
});

Answer 4

You do this by using the JQuery .index() and .eq() functions on a wrapped set of all the input elements.

This moves the focus back to the first input when it is on the last input and the button is clicked.

$(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

This version does not wrap the focus back to the first input.

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

jsfiddle

Answer 5

Sorry this is a little confusing, what are you trying to accomplish with jumping between input fields on click?

Also are you just trying to always go to the next input no matter what the wrapper is? so if I click the second input it goes to the third input, if I click the first it goes to the second input? etc