从上到下聚焦，而不是从左到右聚焦 - Focusing from up to down and not left to right in a table of text-fields when tabbing

Focusing from up to down and not left to right in a table of text-fields when tabbing

我有一个表格形式的html表单，其中学生必须填写他的主题(表单将看起来像一个课程时间表一旦完成)。我在修改选项卡的行为时遇到了麻烦，我希望它垂直移动，而不是默认的从左到右，以允许用户以这种方式填充所有类:

       MON
7 - 8
8 - 9
9 - 10

等。而不是

       MON    TUES    WED

7 - 8

是否有简单的方法来实现这一点?关于如何在不使用文本框表的情况下获得学生的课程表，也欢迎提出建议。

编辑:

没有看到太多使用tabindex，因为我创建我的表从左到右的方式

for($h=0; $h<sizeof($time); $h++) {
        echo "<tr><td> " . $time[$h] . "</td>";
        for($i=0; $i<DAYS; $i++)
            echo "<td><input type='text' name='subject[]' id='subject' autocomplete='off' tabindex='" . $k . "'></td>";
        echo "</tr>";
    }

为输入文本字段指定tabindex

<input type='text' tabindex="0">
<input type='text' tabindex="1">
<input type='text' tabindex="2">

我认为你可以用tabindex来做这些事情。http://www.w3schools.com/tags/att_global_tabindex.asp

您可以在代码中添加一些值来保持tabindex。例如，如果您知道有$time行，则可以使用

for($h=0; $h<sizeof($time); $h++) {
    echo "<tr><td> " . $time[$h] . "</td>";
    for($i=0; $i<DAYS; $i++)
        echo "<td><input type='text'... tabindex='" . ($i*count($time)+$h+1) . "'></td>";
    echo "</tr>";
}

这个$i*count($time)+$h将有唯一的表索引，而$i是一个列，$h是一个行。

编辑

我编辑了代码，因为tabindex不应该是0，所以添加了1。这里的代码http://phpfiddle.org/main/code/c7i-120是您想要的一个工作示例。