How to get first td of next row with JQuery?-CodePudding

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

                <div id="attack">
                    <img  src="images/Attack_icon_(detail).png" alt="Attack icon"/> <input  id="attack-level" placeholder="Attack Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
                     
            </td>
       
             <td>
                <div id="hitpoints">
                    <img  src="images/Hitpoints_icon_(detail).png" alt="hitpoints icon"/> <input  id="hitpoints-level" placeholder="Hitpoints Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>
            <td>
                <div id="mining">
                    <img  src="images/Mining_icon_(detail).png" alt="mining icon"/> <input  id="mining-level" placeholder="Mining Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="strength">
                    <img  src="images/Strength_icon_(detail).png" alt="Strength icon"/> <input  id="strength-level" placeholder="Strength Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>
            <td>
                <div id="agility">
                    <img  src="images/Agility_icon_(detail).png" alt="Agility icon"/> <input  id="agility-level" placeholder="Agility Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>
           <td>
                <div id="smithing">
                    <img  src="images/Smithing_icon_(detail).png" alt="Smithing icon"/> <input  id="smithing-level" placeholder="Smithing Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>

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

          }

CodePudding user response：

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

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
  
<button type="button" id="btnnext">Next</button>
<table id="tbltesT">  
<tr><td><div id="attack">
                    <img  src="images/Attack_icon_(detail).png" alt="Attack icon"/> <input  id="attack-level" placeholder="Attack Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
                     
            </td>
       
             <td>
                <div id="hitpoints">
                    <img  src="images/Hitpoints_icon_(detail).png" alt="hitpoints icon"/> <input  id="hitpoints-level" placeholder="Hitpoints Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>
            <td>
                <div id="mining">
                    <img  src="images/Mining_icon_(detail).png" alt="mining icon"/> <input  id="mining-level" placeholder="Mining Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="strength">
                    <img  src="images/Strength_icon_(detail).png" alt="Strength icon"/> <input  id="strength-level" placeholder="Strength Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>
            <td>
                <div id="agility">
                    <img  src="images/Agility_icon_(detail).png" alt="Agility icon"/> <input  id="agility-level" placeholder="Agility Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>
           <td>
                <div id="smithing">
                    <img  src="images/Smithing_icon_(detail).png" alt="Smithing icon"/> <input  id="smithing-level" placeholder="Smithing Level" type="number" min="1" max=99 oninput="validity.valid||(value='');">
                </div>
            </td>
</tr>
</table>