title: JavaScript function to assign tabindex numbers?
body: <p>I have a form with many fields and I have given every single input, select and button a tabindex number. That works, but I'd like to do it programatically.</p>
  
  <p>The default tabindex order isn't correct because i have a two-column layout with groups in each column. I want to go top-down by group. How can I write a body.onload function so that it would assign all input, select and button tags a tabindex number based upon the containing div? For example, for the div I want to be cycled through first, all the input, select and button tags could have a <code>tabindex=1</code>, and all the input, select and button tags in the second div could have <code>tabindex=2</code>, and so on.</p>
  
  <p>Thanks!</p>
  
  <p>Here's a simplified example</p>
  
  <pre><code>&lt;style&gt;
    .a { display: inline-block;
         width:200px;
         border: 1px solid black;
    }
  &lt;/style&gt;
  
  
  &lt;div class="a"&gt;
      &lt;div id="Div01" title="these inputs should have tabindex=1"&gt;
          &lt;p&gt;Div 01&lt;/p&gt;
          &lt;input id="Div01Field1" type="text" value="Me first"/&gt;
          &lt;input id="Div01Field3" type="text" value="Me second"/&gt;
          &lt;input id="Div01Field2" type="text" value="Me third"/&gt;
          &lt;hr&gt;
      &lt;/div&gt;
      &lt;div id="Div03" title="these inputs should have tabindex=3"&gt;
          &lt;p&gt;Div 03&lt;/p&gt;
          &lt;input id="Div03Field1" type="text" value="Me seventh"/&gt;
          &lt;input id="Div03Field2" type="text" value="Me eighth"/&gt;
          &lt;input id="Div03Field3" type="text" value="Me ninth"/&gt;
          &lt;hr&gt;
      &lt;/div&gt;
      &lt;div id="Div05" title="these inputs should have tabindex=5"&gt;
          &lt;p&gt;Div 05&lt;/p&gt;
          &lt;input id="Div05Field1" type="text" value="Me thirteenth"/&gt;
          &lt;input id="Div05Field2" type="text" value="Me fourteenth"/&gt;
          &lt;input id="Div05Field3" type="text" value="Me fifteenth"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="a"&gt;
      &lt;div id="Div02" title="these inputs should have tabindex=2"&gt;
          &lt;p&gt;Div 02&lt;/p&gt;
          &lt;input id="Div02Field1" type="text" value="Me fourth"/&gt;
          &lt;input id="Div02Field2" type="text" value="Me fifth"/&gt;
          &lt;input id="Div02Field3" type="text" value="Me sixth"/&gt;
          &lt;hr&gt;
      &lt;/div&gt;
      &lt;div id="Div04" title="these inputs should have tabindex=4"&gt;
          &lt;p&gt;Div 04&lt;/p&gt;
          &lt;input id="Div04Field1" type="text" value="Me tenth"/&gt;
          &lt;input id="Div04Field2" type="text" value="Me eleventh"/&gt;
          &lt;input id="Div04Field3" type="text" value="Me twelfth"/&gt;
          &lt;hr&gt;
      &lt;/div&gt;
      &lt;div id="Div06" title="these inputs should have tabindex=6"&gt;
          &lt;p&gt;Div 06&lt;/p&gt;
          &lt;input id="Div06Field1" type="text" value="Me sixteenth"/&gt;
          &lt;input id="Div06Field2" type="text" value="Me seventeenth"/&gt;
          &lt;input id="Div06Field3" type="text" value="Me eighteenth"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>