Javascript 按列的垂直顺序设置tabindex

我正在为输入类型文本指定tabindex，并且这些文本未被禁用/隐藏。下面是我尝试过的，它是有效的。但是，索引的顺序是在表中水平分配的。我需要tabindex在列中的顺序，而不是在水平方向。如何实现这一目标，有什么建议吗？我希望订单如下 这是一个后续的问题

基于for箭头键，我修改了代码，使其也可以使用enter键和tab键以及指定的列模式

我不认为为这种情况指定tabindex属性是最好的主意。您必须在列数或行数的每次更改中重新调整它们。它还将改变页面上可聚焦元素的流动（先是表，然后是表的周围）

/*！
*基于表单导航https://github.com/omichelsen/FormNavigation
*/
（函数（$）{
$.fn.formNavigation=函数（）{
$（此）。每个（函数（）{
//在keyup上触发的事件
$（this）.find（'input'）。on（'keyup'，函数（e）{
开关（e.which）{
//向右箭头
案例39：
$（this）.closest（'td'）.next（）.find（'input'）.focus（）；
打破
//向左箭头
案例37：
$（this）.closest（'td'）.prev（）.find（'input'）.focus（）；
打破
//箭头底部
案例40：
$（this）.closest（'tr'）.next（）.children（）.eq（$（this）.closest（'td'）.index（））.find（'input'）.focus（）；
打破
//箭头顶端
案例38：
$（this）.closest（'tr'）.prev（）.children（）.eq（$（this）.closest（'td'）.index（））.find（'input'）.focus（）；
打破
//进入
案例13：
if（$（this）.closest（'td'）.next（）.find（'input'）.length>0）{
//当右边有另一列时
$（this）.closest（'td'）.next（）.find（'input'）.focus（）；
}否则{
//当最后一列到达时
$（this）.closest（'tr'）.next（）.children（）.eq（1）.find（'input'）.focus（）；
}
打破
}
});
//按键时触发的事件（按住键时可重复）
$（this）.find（'input'）。on（'keydown'，函数（e）{
//需要使用选项卡进行垂直导航
if（e.which==9&&！e.shiftKey）{
//向前航行
if（$（this）.closest（'tr'）.next（）.find（'input'）.length>0）{
//当下面还有一排的时候
e、 预防默认值（）；
$（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）{
//当最后一排到达时
e、 预防默认值（）；
$（this）.closest（'tbody'）.find（'tr:first'）.children（）.eq（$（this）.closest（'td'）.index（）+1）.find（'input'）.focus（）；
}
}else if（e.which==9&&e.shiftKey）{
//向后导航
if（$（this）.closest（'tr'）.prev（）.find（'input'）.length>0）{
//当上面还有一排的时候
e、 预防默认值（）；
$（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）{
//当第一排到达
e、 预防默认值（）；
$（this）.closest（'tbody'）.find（'tr:last'）.children（）.eq（$（this）.closest（'td'）.index（）-1.find（'input'）.focus（）；
}
}
});
});
};
})（jQuery）；
//用法
$（'.gridexample'）.formNavigation（）
/*仅用于演示*/
.gridexample{
字体大小：1.1米；
}
.Gridth示例{
填充物：15em.5em；
}
.例如运输署{
填充：.1em；
宽度：5em；
}
.gridexample输入[type=“text”]{
宽度：100%；
线高：2；
框大小：边框框；
}

在桌子周围采样（在桌子外模拟）。

A.
B
C
D
1.
2.
3.
4.

在桌子周围采样（在桌子外模拟）。

此示例将帮助您根据以下列设置
选项卡索引
：


函数fixVerticalTabindex（选择器）{
如果（选择器的类型=='undefined'）{
选择器='.reset tabindex'；
}
var指数=1；
$（选择器）。每个（功能（i，tbl）{
$（tbl）.find（'tr'）.first（）.find（'td'）.each（函数（clmn，el）{
$（tbl）.find（'trtd:n个子（'+（clmn+1）+'）input'）。每个（函数（j，input）{
$（输入）.attr（'占位符'，tabindex）；
$（输入）.attr（'tabindex'，tabindex++）；
});
});
});
}
$（函数（）{
$（“#btn修复”）。单击（函数（）{
fixVerticalTabindex（'.reset-tabindex'）；
});
});
表格{
边框：1px纯红；
}
输入{
边框：1px纯黑；
宽度：75px；
高度：65px；
字体大小：25px；
文本对齐：居中；
}

没有输入
没有输入
没有输入
没有输入



没有输入
没有输入
没有输入
没有输入
没有输入
没有输入
没有输入
没有输入



单击此处修复@Merlyn Morgan Graham解决方案中的垂直tabindex
这里的@dekel解决方案，我给出了下面的答案。这在很大程度上是可行的

函数赋值tabindex（）{
//定义变量
var maxRowCount=0；
//循环遍历所有行并找到子行（td）长度
//获取maxRowCount
$（'table tbody tr'）。每个（f
   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', i + 1); })

function assignTabIndex() {
    // Define variables 
    var maxRowCount = 0;        
    // Loop through all rows and find the children (td) length
    // Get the maxRowCount
    $('table tbody tr').each(function() {
        maxRowCount = Math.max(maxRowCount, $(this).children('td').length);        
    });

    // Define and start the cell count at 1
    var cellCounter = 1;
    // Loop through the table, column first instead of row first
    for (var columnIndex = 0; columnIndex < maxRowCount; ++columnIndex) {
        // Loop through all the rows for the current column
        $('form table tr').each(function() {
            // ...but only look at cells matching the current column
            var cellForCurrentColumn = $(this)
                .children('td')
                .eq(columnIndex)
                .find('input[type =text]:not([disabled])');
            // Some rows could be bigger than others,
            // so cellForCurrentColumn might not exist for shorter rows
            if (cellForCurrentColumn != null) {
                // Set the tab index and then increment the counter
                cellForCurrentColumn.attr('tabindex', cellCounter++);
            }
        });
    }
};
// Enter key to follow tab index

   function EnterKeyAsTabKey() {
    $(document).ready(function() {
        assignTabIndex(); //call the assignTabIndex function

        // Will only run once the page Document Object Model (DOM) is ready for JavaScript code 
        // Create a jQuery object containing the html element 'input', and not disabled
        // Create a .not() method to exclude buttons for keypress event
        $(":input:not([disabled])").not($(":button")).keypress(function(evt) {
            // If the keypress event code is 13 (Enter)
            if (event.which === 13 && this.type !== 'submit' || 'reset') {
                evt.preventDefault();
                // Get the attribute type and if the type is not submit
                itype = $(this).prop('type');
                // Get the current Tabindex
                currentTabindex = $(this).attr('tabindex');
                // alert(currentTabindex); // alert to check the value a variable has. Good for trouble shoot
                if (currentTabindex) {
                    nextInput = $('input[tabindex^="' + (parseInt(currentTabindex) + 1) + '"]');
                    // console.log(this, nextInput); // to print next input in console. Good for trouble shoot
                    if (nextInput.length) {
                        nextInput.focus();
                    } else
                        return false;

                }

            }
        });
    })
};

let columns_number=4; // static for me, but you can send/get it via data-columns="4" as form attribute

$('form').find('input, select, textarea').each(function(){
    $(this).attr('tabindex', $(this).attr('type')==='submit' ? 999 : $(this).closest('div').index()%columns_number+1);
});