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

我在Bootstrap Modal中有一个表，工作正常，但我想使用Tab键导航表行，但也不能像我想要的那样，它会在第一个选项卡上移动到表主体，然后是表标题，然后是表主体，我想像表和桌子的身体。
下面的代码请帮助我。

 $(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>

最佳答案

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

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

关于javascript - 如何在数据表中使用TAB键，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39873859/