JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<form>
    <input type="text" />                                                                        
<input type="text" />
<input type="text" />
<input type="text" />
    <label><input type="text" /></label>

<table data-tab-direction="vertical">
 <tr>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
 <tr>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
 <tr>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
</table>

<input type="text" />

<table data-tab-direction="vertical">
 <tr>
  <td>a</td>
  <td>hmm</td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
 <tr>
  <td>b</td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
 <tr>
  <td>c</td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
</table>

<input type="text" />
<input type="text" />
<input type="text" />

<table>
 <tr>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
 <tr>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
 <tr>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
 </tr>
</table>

<input type="text" />
<input type="text" />
<input type="text" />
</form>

CSS

td {
   background:#eee; padding:3px;
}

JavaScript

$(function() {
    
    /* tab order */
    var $tablesWithVerticalTabbing = $('table[data-tab-direction=vertical]'),
        startAt = 1000; //We have no idea if there's loads of tab-indexed content (eg nav links) 
    
    //if we need to do this at all...
    if($tablesWithVerticalTabbing.length > 0){
    
        //give EVERY input(:input include textarea ext) a tabindex
        $(':input').each(function(i) {            
            $(this)
                .attr('tabindex', startAt+i+1)
                .val(startAt+i+1);//for testing
        });
        //re-set the tab index in a vertical fashion
        $tablesWithVerticalTabbing.each(function(){            
            //get the last tabindex of the first cell
            var tabOffset = $(this).find("input:first").attr('tabindex');
            //console.log($(this).prevUntil("form").find("input").last());
            $(this).find('tr').each(function(){
                /*var e = 0;
                $(this).find('td').each(function(i) {
                    var $this = $(this);
                    if($this.find('input').length>0){
                        $this.find('input')
                            .attr('tabindex', tabOffset + (e))
                            .val(tabOffset + (e));//for testing
                        e=e+1;
                    }
                });*/

                $(this).find('td').each(function(i){
                    $(this).find('input')
                        .attr('tabindex', tabOffset + (i))
                        .val(tabOffset + (i));//for testing
                });
            });
        });
    }
    
});