如何使用javascript遍历html表输入

Question

I want to iterator through a table containing input fields without using tab.

As tab only iterate through right.

I need to use keyboard arrow to iterate through the input fields.

<td class="td-pad" *ngFor="let size of sizeRange;">
    <div class="input-group">
        <input type="" class="form-control fs-tr" (change)="changeSelectedQuantity('F',size)" [(ngModel)]="selectedStock[stock]['F'][size]" [disabled]="availableStock[stock]['F'][size]<=0" >
        <div class="input-group-append">
                <span class="input-group-text">/ {{availableStock[stock]['F'][size] ? availableStock[stock]['F'][size] : 0}}</span>
        </div>
    </div>
</td>

Answer 1

I have a below code which we have used in one of our application for the same requirement

Using recursion I iterate through the DOM to check if the element is "tr" or "td" and then find the next or previous sibling depending on the key press. Then get the child input to set the focus.

Hope this helps

 const NEXT = "next", PREV = "prev", UP = "up", DOWN = "down", TR = "tr", TD = "td"; function arrowPressed(element, type, nName) { var newElement = getInput(element, type, nName); if (newElement != undefined && newElement != null) { if (newElement.disabled) { arrowPressed(newElement, type, nName) } else { newElement.focus(); } } } function getInput(element, type, nName) { if (element != null && element.nodeName.toLowerCase() == nName) { if (element.nextElementSibling != null && (type == NEXT || type == DOWN)) { return element.nextElementSibling.querySelector('.kd-input'); } else if (element.nextElementSibling == null && type == NEXT) { return getInput(element.parentElement, DOWN, TR); } else if (element.previousElementSibling != null && (type == PREV || type == UP)) { return element.previousElementSibling.querySelector('.kd-input'); } else if (element.previousElementSibling == null && type == PREV) { return getInput(element.parentElement, UP, TR); } } else { return getInput(element.parentElement, type, nName); } return null; } document.onkeydown = function(evt) { evt = evt || window.event; if (evt.target && evt.target.className == 'kd-input') { switch (evt.keyCode) { case 37: arrowPressed(evt.target, PREV, TD); break; case 39: arrowPressed(evt.target, NEXT, TD); break; case 38: arrowPressed(evt.target, UP, TR); break; case 40: arrowPressed(evt.target, DOWN, TR); break; } } };

 <table> <tr> <th>Input1</th> <th>Input2</th> <th>Input3</th> <th>Input4</th> <th>Input5</th> </tr> <tr> <td><input class="kd-input"></td> <td><input class="kd-input" disabled></td> <td><input class="kd-input" disabled></td> <td><input class="kd-input"></td> <td><input class="kd-input"></td> </tr> <tr> <td><input class="kd-input"></td> <td><input class="kd-input"></td> <td><input class="kd-input" disabled></td> <td><input class="kd-input"></td> <td><input class="kd-input" disabled></td> </tr> <tr> <td><input class="kd-input" disabled></td> <td><input class="kd-input"></td> <td><input class="kd-input"></td> <td><input class="kd-input"></td> <td><input class="kd-input"></td> </tr> <tr> <td><input class="kd-input"></td> <td><input class="kd-input"></td> <td><input class="kd-input" disabled></td> <td><input class="kd-input" disabled></td> <td><input class="kd-input"></td> </tr> </table>