How to get first td of next row with JQuery?

Question

The code goes from the first td to the 2nd, then 3rd, then 6th (3rd td in second tr), I want to go to the first td in the second tr (4th)

I'm brand new to JQuery and not sure the best way forward

html

JQuery

 var $next = $(this).closest('td').next().find(".skill-input")
          if ($next.length)
          {              
              $(this).closest('td').next().find(".skill-input").focus();
              return;
              
          }
          if ($(this).closest('tr').next().find(".skill-input"))
          {
              $(this).closest('tr').next().find(".skill-input").focus();

          }

user_4830196 · Answer

I made a few modifications, such as focusing on the first input when DOM ready and used more specific calls to next by passing in the element tag being looked for, and adding a button to simulate what I think you want. I also added to your example Html to wrap the table rows in an actual table as I figure you are just missing some in your post. I also, used .first in some instances to get the first element of the node list.

let $currinput = null; //used for tracking the last focused input
$(function(){
     $('#btnnext').on('click', MoveToNextTd);
     SetFocusToFirstSkillInput();
});
          
function MoveToNextTd(){
    const $next = $currinput.closest('td').next('td').find(".skill-input");
    if ($next.length)
    {   
        $currinput = $next;
        $next.focus();
        return;
    }
    
    const $nxtrow = $currinput.closest('tr').next('tr');
    if($nxtrow.length && $nxtrow.find(".skill-input"))
    {
        $currinput = $nxtrow.find(".skill-input").first();
        $currinput.focus();
    }
    else
    {
        SetFocusToFirstSkillInput(); //move back to the first input
    }
}
          
function SetFocusToFirstSkillInput(){
     $currinput = $('#tbltesT tr').first().find('td').first().find('input.skill-input');
     $currinput.focus();
}

How to get first td of next row with JQuery?

1 Answers