javascript - Set tabindex in vertical order of columns -

i assigning tabindex input type text, , not disabled/hidden. following tried, , works. however, order of indexes horizontally assigned in table. need order of tabindex in column wise rather horizontal. suggestions how achieve ? want order follow q follow enter key follow tabindex (in scenario enter key changed behave tab).

   col1 col2 col3     1      3    7     2      4    8            5    9             6   10    (":input:not([disabled]):not(:hidden)").not($(":submit")).not($(":reset")).each(function (i) { $(this).attr('tabindex', + 1); }) 

based on this solution arrow keys modified code work enter key , tab key specified column-wise mode.

i don't think best idea specify tabindex attributes such case. have recaltulate them on every change in number of columns or rows. change flow of focusable elements on page (table first surrounding).

/*!  * based on formnavigation https://github.com/omichelsen/formnavigation  */  (function ($) {    $.fn.formnavigation = function () {      $(this).each(function () {        // events triggered on keyup        $(this).find('input').on('keyup', function(e) {          switch (e.which) {            // arrow right            case 39:              $(this).closest('td').next().find('input').focus();              break;              // arrow left            case 37:              $(this).closest('td').prev().find('input').focus();              break;              // arrow bottom            case 40:              $(this).closest('tr').next().children().eq($(this).closest('td').index()).find('input').focus();              break;              // arrow top            case 38:              $(this).closest('tr').prev().children().eq($(this).closest('td').index()).find('input').focus();              break;              // enter            case 13:              if ($(this).closest('td').next().find('input').length>0) {                // when there column on right                $(this).closest('td').next().find('input').focus();              } else {                // when last column reached                $(this).closest('tr').next().children().eq(1).find('input').focus();              }              break;          }        });                // events triggered on keydown (repeatable when holding key)        $(this).find('input').on('keydown', function(e) {          // vertical navigation using tab op wanted          if (e.which === 9 && !e.shiftkey) {            // navigate forward            if ($(this).closest('tr').next().find('input').length>0) {              // when there row below              e.preventdefault();              $(this).closest('tr').next().children().eq($(this).closest('td').index()).find('input').focus();            } else if ($(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').length>0) {              // when last row reached              e.preventdefault();              $(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').focus();            }          } else if (e.which === 9 && e.shiftkey) {            // navigate backward            if ($(this).closest('tr').prev().find('input').length>0) {              // when there row above              e.preventdefault();              $(this).closest('tr').prev().children().eq($(this).closest('td').index()).find('input').focus();            } else if ($(this).closest('tbody').find('tr:last').children().eq($(this).closest('td').index()-1).find('input').length>0) {              // when first row reached              e.preventdefault();              $(this).closest('tbody').find('tr:last').children().eq($(this).closest('td').index()-1).find('input').focus();            }          }        });      });    };  })(jquery);    // usage  $('.gridexample').formnavigation();

/* demonstration */  .gridexample {    font-size: 1.1em;  }  .gridexample th {    padding: .15em .5em;  }  .gridexample td {    padding: .1em;    width: 5em;  }  .gridexample input[type="text"] {    width: 100%;    line-height: 2;    box-sizing: border-box;  }

<p>    sample <a href="#">links</a> around table (to simulate <a href="#">focus</a> outside table).  </p>    <table class="gridexample">    <thead>      <tr>        <th></th>        <th>a</th>        <th>b</th>        <th>c</th>        <th>d</th>      </tr>    </thead>    <tbody>      <tr>        <th>1</th>        <td><input type="text"></td>        <td><input type="text"></td>        <td><input type="text"></td>        <td><input type="text"></td>      </tr>      <tr>        <th>2</th>        <td><input type="text"></td>        <td><input type="text"></td>        <td><input type="text"></td>        <td><input type="text"></td>      </tr>      <tr>        <th>3</th>        <td><input type="text"></td>        <td><input type="text"></td>        <td><input type="text"></td>        <td><input type="text"></td>      </tr>      <tr>        <th>4</th>        <td><input type="text"></td>        <td><input type="text"></td>        <td><input type="text"></td>        <td><input type="text"></td>      </tr>    </tbody>  </table>    <p>    sample <a href="#">links</a> around table (to simulate <a href="#">focus</a> outside table).  </p>    <!-- jquery needed solution -->  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>