javascript - 如何在数据表中使用 TAB 键

Question

我在 Bootstrap Modal 中有一个表格，工作得很好，但我想要一个 tab 键来导航表格行，这也可以工作，但不像我想要的那样，它在第一个选项卡上到表格主体，然后是表格标题，然后是表格主体和我想要像 table 和 table 身。下面是我的代码，请帮助我。

 $(document).ready(function() {
                            $('#reservationTable1').DataTable({
                                // "ajax": "arrays.txt",
                               
                                //fixedHeader: true,
                                scrollY: 300,
                                //scrollX: false,
                                "bFilter": false,
                                paging: false,

                            });
                        });

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document" style="width:768px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form class="form">
                <div class="form-group">
                    <label for="jquery-search-sample">Search</label>
                    <input type="text" class="form-control" id="jquery-search-sample" />
                </div>
            </form>
            <div class="modal-body" style="height:500px;overflow: auto;">
                <div class="container1">

                    <section class="">
                        <div class="container" style="padding:0px;">
                            <table id="reservationTable1" class="table table-striped table-bordered">
                                <thead style="border-bottom:1px solid #eee;">
                                    <tr style="background-color :red;">
                                        <th style="padding:10px 37px!important;">
                                            Col1

                                        </th>
                                        <th style="padding:10px 37px!important;">
                                            Col2

                                        </th>
                                        <th style="padding:10px 37px!important;">
                                            Col3

                                        </th>

                                    </tr>
                                </thead>
                                <tbody id="reservationTlbBody1" tabindex='0'>
                                    <tr>
                                        <td>Jill</td>
                                        <td>Smith</td>
                                        <td>50</td>
                                    </tr>
                                    <tr>
                                        <td>Eve</td>
                                        <td>Jackson</td>
                                        <td>94</td>
                                    </tr>
                                    <tr>
                                        <td>John</td>
                                        <td>Doe</td>
                                        <td>80</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </section>


                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以使用tabindex=...属性，它允许您指定关注的顺序。

您也可以创建 JS 代码来捕获选项卡并对其进行处理。