JavaScript函数分配表索引号

Mike代码的一个更灵活的版本，它将tabIndex设置为div id中使用的数字。当您更改页面结构时，也不需要修改。

任何没有id或id与前缀-数字模式不匹配的div都将被忽略。

<script> "use strict"; // place after </body> tag
  (function TabNumbers (pfx) {
    /* For all divs in the document with an id pfx followed by a number,
       set the tabIndex of all immediate children with tags of INPUT,
       SELECT, or BUTTON to the numeric value */
    pfx = new RegExp ('^' + pfx + '(''d+)$');  
    for (var divs = document.getElementsByTagName ('div'), 
             el, m, i = divs.length; i--;) { // traverse all divs 
      if ((m = divs[i].id.match (pfx))) { // for those with id Div#
        for (el = divs[i].firstChild; el; 
             el = el.nextSibling) { // Traverse their child nodes
          if (el.tagName === 'INPUT' || el.tagName === 'SELECT' || 
              el.tagName === 'BUTTON') {
              el.tabIndex = +m[1];
          }         
        }
      }
    }
  }) ('Div');  
</script>

经过一些讨论，规范被修改，以下代码被接受:

<script> "use strict"; // place after </body> tag
  (function TabNumbers () {
    var itags = ["INPUT", "SELECT", "BUTTON"]
      , tags
      , tag
      , el  
      , t
      , a
      ;
    while (itags.length) {
      for (tags = document.getElementsByTagName (itags.pop ()), t = tags.length; t--;) {
        el = tag = tags[t];
        while ((el = el.parentNode) && el.tagName) {
          if (el.getAttribute && (a = el.getAttribute ('data-tindex'))) { 
            tag.tabIndex = a;
            break;
          }
        }
      }     
    }
  }) ();    
</script>

Chrome测试

如果容器Div01等可以有可排序的id，就像你的例子一样，那么你可以这样做

var groups = $('div[id^="Div"]').sort(function(a,b){
    return (a.id > b.id) ? 1 : -1;
});
groups.find(':input').each(function(idx){
    $(this).prop('tabindex', idx+1);
});

var gnodes = document.getElementsByClassName('group'); // find elements with group class - non-sortable
var groups = []; // create empty array to hold groups - sortable
for (var i = 0, l = gnodes.length; i<l; i++){ // place elements in array so we can sort it
    groups.push( gnodes[i] );
}
groups.sort(function(a,b){ // sort the array based on id
    return (a.id > b.id) ? 1 : -1;
});
var counter = 1; // incremental number to define the tabindex
for (var i = 0, l = groups.length; i<l; i++){
    var group = groups[i],
        elements = group.getElementsByClassName('input'); // find all input elements  of this group (must add class to all of them)
    for (var e = 0, len = elements.length; e < len; e++){
        elements[e].setAttribute('tabindex',counter++); // set tabindex
    }
}

假设您正在使用Prototype(您可能没有)，它看起来像这样:

Event.observe(window, 'dom:load', function() {
    var inputs = [$$('#div1 input, #div1 a'), $$('#div2 input')];
    var i = 0;
    inputs.each(function(inputList) {
        inputList.each(function(input) {
            i++;
            input.tabIndex = i;
        });
    });
});

注意:未经考验的

<script type="text/javascript">
  function TabNumbers() { 
      var t = document.getElementById('Div01').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
              t[i].tabIndex = 1;
          }
      }
      var t = document.getElementById('Div02').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 2;
          }
      }
      var t = document.getElementById('Div03').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 3;
          }
      }
      var t = document.getElementById('Div04').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 4;
          }
      }
      var t = document.getElementById('Div05').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 5;
          }
      }
      var t = document.getElementById('Div06').childNodes;
      for (i = 0; i < t.length; i++) { 
          if (t[i].tagName == 'INPUT' || t[i].tagName == 'SELECT' || t[i].tagName == 'BUTTON') {
             t[i].tabIndex = 6;
          }
      }
  }
</script>