Javascript HTML-分组索引；旧HTML代码中间的tabindex

我正在维护一个高级的eform应用程序，它混合了传统的freetext HTML，我无法轻松更改。以前没有使用tabindex，它依赖于字符流顺序

在页面中间，我需要介绍一个表，其中包含具有自定义选项卡顺序的输入，例如：

|-----|-----|-----| | 1 | 3 | 5 | |-----|-----|-----| | 2 | 4 | 6 | |-----------------| |-----|-----|-----| | 1 | 3 | 5 | |-----|-----|-----| | 2 | 4 | 6 | |-----------------| 传统/以前添加的输入在页面上呈现的方式，实际上我可以动态/集中地修改它们，以便它们按顺序输出tabindex。例如：

[Input, tabindex: 1] |-----|-----|-----| | 2 | 4 | 6 | |-----|-----|-----| | 3 | 5 | 7 | |-----------------| [Input, tabindex: 8] [输入，tabindex:1] |-----|-----|-----| | 2 | 4 | 6 | |-----|-----|-----| | 3 | 5 | 7 | |-----------------| [输入，tabindex:8] 但是当freetext HTML锚开始出现时，问题就出现了，因为这些锚不是动态呈现的（因此无法轻松地向它们添加tabindex，除非我添加了相当多的正则表达式逻辑）。因此，选项卡变为：

[Input, tabindex: 1] |-----|-----|-----| | 2 | 4 | 6 | |-----|-----|-----| | 3 | 5 | 7 | |-----------------| [anchor link] [Input, tabindex: 8] [输入，tabindex:1] |-----|-----|-----| | 2 | 4 | 6 | |-----|-----|-----| | 3 | 5 | 7 | |-----------------| [锚定链接] [输入，tabindex:8] 这使得链接无法通过选项卡切换到。可能会有更糟糕、更严重的情况。。。但我认为这个问题是可以理解的

所以我的问题是。。。是否可以在某种意义上分配某种类型的索引组：

[tabgroup1] [Input] [/tabgroup1] [tabgroup2] |-----|-----|-----| | 1 | 3 | 5 | |-----|-----|-----| | 2 | 4 | 6 | |-----------------| [/tabgroup2] [tabgroup3] [anchor link] [Input] [/tabgroup3] [表1] [输入] [/tabgroup1] [表2] |-----|-----|-----| | 1 | 3 | 5 | |-----|-----|-----| | 2 | 4 | 6 | |-----------------| [/tabgroup2] [表3] [锚定链接] [输入] [/tabgroup3] 这样我就可以像以前一样进行制表工作，按照字符流的顺序跳跃，从输入到最近的锚点，再到下一个输入，等等。。。但在[tabgroup2]内部，它将按照tabindex的顺序进行，然后继续进入[tabgroup2]并继续tab，就好像所有元素都有tabindex=“0”

---

我正在寻找的是一些神奇的HTML解决方案（这不太可能），或者是一个相对简单的javascript库，它可能已经实现了类似的东西

---

或者，如果这不是真的存在，那么听听其他的想法，或者我自己尝试实现它时可能需要注意的问题，会很有趣。

好的，我用自己的一些代码解决了这个问题。生成的javascript如下所示：

函数updateTabIndex（）{
$（'a，area，button，input，object，select，textarea'）。每个（函数（即，e）{
var元素=$（e）；
var-tabIndex=i；
if（element.attr（'data-tabindexoffset'））{
var tabgroup=$（element.closest（'[data tabgroup]'）；
如果（！tabgroup.attr（'data-tabindexstart'））{
tabgroup.attr（'data-tabindexstart'，tabIndex）；
}
var tabIndexStart=parseInt（tabgroup.attr（'data-tabIndexStart'））；
tabIndex=tabIndexStart+parseInt（element.attr（'data-tabindexoffset'）；
}
$（e）.attr（'tabindex'，tabindex）；
});
}
$（函数（）{
updateTabIndex（）；
});

这使我能够不使用tabindex，除了已知元素组内的偏移量，其中tabindex将不遵循常规字符流顺序。它似乎工作得很好，因为组后面的索引总是相同的；只需重新排序它们之间的那些

这样的解决方案唯一的问题是，如果在AJAX调用中添加和删除了元素，那么所有索引都需要重新计算。但它应该相当快

示例HTML是：

<table data-tabgroup="1">
    <tr>
        <td><input type="text" name="b" data-tabindexoffset="0" value="1" /></td>
        <td><input type="text" name="c" data-tabindexoffset="2" value="3" /></td>
    </tr>
    <tr>
        <td><input type="text" name="d" data-tabindexoffset="1" value="2" /></td>
        <td><input type="text" name="e" data-tabindexoffset="3" value="4" /></td>
    </tr>
</table>

<a href="#">A link</a>
<input type="text" name="f" />

---

好的，我用自己的一些代码解决了这个问题。生成的javascript如下所示：

函数updateTabIndex（）{
$（'a，area，button，input，object，select，textarea'）。每个（函数（即，e）{
var元素=$（e）；
var-tabIndex=i；
if（element.attr（'data-tabindexoffset'））{
var tabgroup=$（element.closest（'[data tabgroup]'）；
如果（！tabgroup.attr（'data-tabindexstart'））{
tabgroup.attr（'data-tabindexstart'，tabIndex）；
}
var tabIndexStart=parseInt（tabgroup.attr（'data-tabIndexStart'））；
tabIndex=tabIndexStart+parseInt（element.attr（'data-tabindexoffset'）；
}
$（e）.attr（'tabindex'，tabindex）；
});
}
$（函数（）{
updateTabIndex（）；
});

这使我能够不使用tabindex，除了已知元素组内的偏移量，其中tabindex将不遵循常规字符流顺序。它似乎工作得很好，因为组后面的索引总是相同的；只需重新排序它们之间的那些

这样的解决方案唯一的问题是，如果在AJAX调用中添加和删除了元素，那么所有索引都需要重新计算。但它应该相当快

示例HTML是：

<table data-tabgroup="1">
    <tr>
        <td><input type="text" name="b" data-tabindexoffset="0" value="1" /></td>
        <td><input type="text" name="c" data-tabindexoffset="2" value="3" /></td>
    </tr>
    <tr>
        <td><input type="text" name="d" data-tabindexoffset="1" value="2" /></td>
        <td><input type="text" name="e" data-tabindexoffset="3" value="4" /></td>
    </tr>
</table>

<a href="#">A link</a>
<input type="text" name="f" />

呈现HTML后，您应该能够使用jQuery添加选项卡索引。您可以提供一个带有添加的锚定标记的呈现HTML的示例吗？您应该能够在呈现HTML后使用jQuery添加选项卡索引。您能提供一个带有附加锚定标记的呈现HTML的示例吗？