how to work with TAB key in Datatable

Question

I have a table inside Bootstrap Modal,work well but i want a tab key to navigate table row, that also work but not like i want, it gose on 1st tab to table body then table heading and then table body and i want like table and the table body. below my code please help me.

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

You can use the tabindex=... attribute, it allows you to specify which order things are focused.

You could alternatively create JS code to catch the tab, and process it.