Tab index for dynamically added elements - html

Question

I have a jsp page with three text boxes and a ADD button beside it. Now I have to set the tabindex for the dynamically added elements. How can I do it?

Answer 1

[As you may have figured out by now, posting code allows someone else to give a more definite answer. Without an example to work from, I can only imagine what your code and environment is...from ASP.NET MVC3 + jQuery]
[I used the information from this stackoverflow post and modified a lit bit.]
I use jQuery to modify the tabindex value. I have multiple forms that are dynamically added by jQuery. The forms use div and style="display: table" to organize the text fields into columns.
[The relevant CSS styles]
.tb-table
{
display: table;
}
.tb-row
{
display: table-row;
}
.tb-cell
{
display: table-cell;
}
[A chunk of my ASP.NET MVC3 Razor cshtml that produces html for the browser--should be readable]
<div class="tb-table">
<div id="namerow1" class="tb-row">
<div class="tb-label tb-cell" id="l_firstname1">
#Html.LabelFor(model => model.firstname1)
</div>
<div class="tb-field tb-cell" id="firstname1">
#Html.TextBoxFor(model => model.firstname1, new { tabindex = "1" })
#Html.ValidationMessageFor(model => model.firstname1)
</div>
<div class="tb-label tb-cell" id="l_firstname2">
#Html.LabelFor(model => model.firstname2)
</div>
<div class="tb-field tb-cell" id="firstname2">
#Html.TextBoxFor(model => model.firstname2, new { tabindex = "2" })
#Html.ValidationMessageFor(model => model.firstname2)
</div>
</div>
<div id="namerow2" class="tb-row">
<div class="tb-label tb-cell">
#Html.LabelFor(model => model.lastname1)
</div>
<div class="tb-field tb-cell">
#Html.TextBoxFor(model => model.lastname1, new { tabindex = "1" })
#Html.ValidationMessageFor(model => model.lastname1)
</div>
<div class="tb-label tb-cell">
#Html.LabelFor(model => model.lastname2)
</div>
<div class="tb-field tb-cell">
#Html.TextBoxFor(model => model.lastname2, new { tabindex = "2" })
#Html.ValidationMessageFor(model => model.lastname2)
</div>
</div>
</div>
I use tabindex for all values in a column; not just a unique order. For the browsers I tested in, when there are multiple text fields with the same tabindex, the text field encountered first in the html code will be selected first by tab-navigation.
Therefore, for each form that I have, I use a tab value from 0-9 to group them. Once I have the tab order for an individual form working the way I want, I use the following jQuery to INCREMENT the tabindex value by 10 (or 20, or 30, or 40) for each form that I dynamically add. the first decimal, 0-9, organizes the tabs within that form, and incrementing the factors of 10 keeps the subsequent form tabs following along.
$('.createtab-form [tabindex]').each(function () {$(this).attr('tabindex', parseInt($(this).attr('tabindex'))+10)})
This is my first attempt at this myself--I'm sure someone else will have a better method. Let me know what you think.