时间戳

首页 > 解决方案 > 浏览 html 表格中输入的单元格

html - 浏览 html 表格中输入的单元格

问题描述

我有一个带有备用输入和复选框的表格 html。我的问题是当我想用键标签浏览我的表时。当焦点在复选框上时，下一个选项卡不是下一个单元格，而是下一个复选框。这是我的代码：

<form class="tabledit-form">

        <table id="table" class=" table-striped">
            <thead>
                <tr>
                    <th class="head-num"><div><span>N°</span></div></th>
                    <th class="head-ba"><div><span>Ba</span></div></th>
                    <th class="head-num2"><div><span>N2°</span></div></th>
                    <th class="head-ba2"><div><span>Ba2</span></div></th>
                    <th class="head-num3"><div><span>N3°</span></div></th>
                    <th class="head-ba3"><div><span>Ba3</span></div></th>
                </tr>
            </thead>
            <tbody>
                {% for i in nb_lines %}

                <tr class="line-{{forloop.counter}}">
                    <td id="lg-{{forloop.counter}}-col-1" tabindex="1"></td>
                    <td id="lg-{{forloop.counter}}-col-2" tabindex="2"><input type="checkbox" name="ba-1-lg-{{forloop.counter}}" /></td>
                    <td id="lg-{{forloop.counter}}-col-3" tabindex="3"></td>
                    <td id="lg-{{forloop.counter}}-col-4" tabindex="4"><input type="checkbox" name="ba-2-lg-{{forloop.counter}}" /></td>
                    <td id="lg-{{forloop.counter}}-col-5" tabindex="5"></td>
                    <td id="lg-{{forloop.counter}}-col-6" tabindex="6"><input type="checkbox" name="ba-3-lg-{{forloop.counter}}" /></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </form>

标签： htmlcsshtml-table

解决方案

首先尽量不要使用 tabindex>0 不推荐。

阅读本文以更好地了解tabindex https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

看我做的这个例子：

 <table>
      <thead>
        <tr>
          <th>Cell 1</th>
          <th>Cell 2</th> 
          <th>Cell 3</th>
          <th>Cell 4</th>
          <th>Cell 5</th>
        </tr> 
      </thead>
      <tbody>
        <tr>
          <td tabindex="0"><input type="checkbox"/></td>
          <td tabindex="0">Col</td>
          <td tabindex="0"><input type="checkbox"/></td>
          <td tabindex="0">Col</td>
          <td tabindex="0"><input type="checkbox"/></td>
        </tr>
      </tbody>
</table>

推荐阅读