Question

我需要根据用户希望的方式来完成更改光标的选项卡索引。我不确定实现这一目标的最佳方法是什么。我创造了一个小提琴，以确保所有人都能理解这里所解释的内容。

要求如下：

在所有行和列上都有一个包含一系列文本框的表。
表格下方提供了一个单选按钮，供用户可以在桌面上的文本框中移动。
选择“水平移动”将使光标在按下选项卡或达到最大长度时从每个文本框水平移动。
选择“垂直移动”将在按下选项卡或达到最大长度时使光标从每个文本框垂直移动。
默认情况下，标签索引会垂直移动。
当到达列上任一行的最后一个文本框时，光标应自动移动到下一行或第一列文本框。

如何在选择单选按钮时动态实现此目的。

JS小提琴：http://jsfiddle.net/2uzfT/4/embedded/result/

Answer 1

您的完整解决方案：）

<强> HTML

<table border="1" id="mytable">
  <thead>
    <tr>
      <th> Description </th>
      <th> Column1 </th>
      <th> Column2 </th>
      <th> Column3 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Stephen </td>
      <td><input type="text">
      </td>
      <td><input type="text">
      </td>
      <td><input type="text">
      </td>
    </tr>
    <tr>
      <td> Malcom </td>
      <td><input type="text">
      </td>
      <td><input type="text">
      </td>
      <td><input type="text">
      </td>
    </tr>
    <tr>
      <td> Judith </td>
      <td><input type="text">
      </td>
      <td><input type="text">
      </td>
      <td><input type="text">
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>
<INPUT TYPE=RADIO NAME="selection" VALUE="V">
Move Verically<BR>
<INPUT TYPE=RADIO NAME="selection" VALUE="H">
Move Horizontally<BR>

<强>的jQuery

$(function() {
    var inputBox = $('#mytable input[type="text"]').length;
    var row = $('#mytable tbody tr').length;
    var column = $('#mytable tbody tr:first td').length;

    // Vertical
    $('input:radio').change(function() {
        var self = $(this);

        if(self.val() == "V") {
            var counter = 1;
            for(i=1; i<column; i++) {   
                for(j=2; j<=row+1; j++) {
                    $('#mytable tbody tr td:nth-child('+j+')').find('input[type="text"]').attr('tabindex', counter);
                    counter++;
                }
            }
        }

        else {
            $('#mytable input[type="text"]').removeAttr('tabindex');
        }
    });
});

Answer 2

jQuery下面提出了一个粗略的想法：

// For columns
    var textBoxes = $('#tableid input[type="textbox"]').length;
    var rowNums = 4;

    for(i=0; i<=textBoxes; i++) {
     for(j=0; j<=rowNums; j++) {
      $('#tableid').find('tr:eq('+j+') input[type="textbox"]').attr('tabindex', i);
     }
    }

行索引也可以与上面相同

动态更改文本框的Tab索引

2 个答案: