如何使用TAB鍵在Datatable中

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代碼來捕捉選項卡並對其進行處理。