How to iterate through a html table inputs using javascript

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>

As tab only iterate through right. means what? Shift-tab goes the other way — mplungjan
– mplungjan, Commented Mar 6, 2019 at 12:59
My code only have tables and input tags. I am able to traverse using tabs. but cannot do it with arrow keys — Jeethesh Kotian
– Jeethesh Kotian, Commented Mar 6, 2019 at 13:02
@mplungjan yeah that I got to know.. But arrow doesn't work... — Jeethesh Kotian
– Jeethesh Kotian, Commented Mar 6, 2019 at 13:05

mplungjan · Accepted Answer · 2019-03-06 13:07:15Z

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>

Collectives™ on Stack Overflow

How to iterate through a html table inputs using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related