Question

我在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>

Answer 1

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

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

如何在Datatable中使用TAB键

1 个答案: