focus not working

Question

Я пытаюсь использовать метод focus() JQuery, и я не понимаю, почему он не работает. Вот скрипка: jsfiddle любые предложения?

HTML код

<div class="documents-container cfx"> 
    <table class="documents-table"> 
     <tbody> 
     <tr class="table-row-details" style="display: none;"> 
      <td class="pad-box-table-details" colspan="6"> 
       <div> 
        <h4> test </h4> 
        <ul class="styled-list"> 
        <li> How to solve the issue... </li> 
        <li> Some other solution... </li> 
        </ul> 
       </div> 
      </td> 
     </tr> 
     <tr class="with-details js-toggle-table-details"> 
      <td> 
       24.08.2015 
       <div class="meta"> 
        12:45 
       </div> 
      </td> 
      <td> 
       Sending despatch advice 
      </td> 
      <td> 
       ... 
       <div class="meta"> 
        test 
       </div> 
      </td> 
      <td> 
       <a href="#"> 
       Unknown receiver 
       </a> 
      </td> 
      <td id="resolvedStatus"> 
       Unresolved 
      </td> 
      <td class="align-right"> 
       <div id="infoBubble" class="js-info-bubble-parent"> 
        <div class="document-status document-status--red js-docReqAttention-bubble-toggler"> 
        <div class="js-info-bubble info-bubble info-bubble-bottom info-bubble-bottom-right" style="display: none;"> 
         <div class="info-bubble-content"> 
          <div class="document-status-bubble"> 
           additional info to be added... 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
      </td> 
     </tr> 
     <tr class="table-row-details" style="display: table-row;"> 
      <td class="pad-box-table-details" colspan="6"> 
       <div> 
        <ul class="styled-list"> 
        <li> How to solve the issue... </li> 
        <li> Some other solution... </li> 
        </ul> 
       </div> 
      </td> 
     </tr> 
     <tr class="with-details js-toggle-table-details"> 
      <td> 
       24.08.2015 
       <div class="meta"> 
        12:41 
       </div> 
      </td> 
      <td> 
       Sending despatch advice 
      </td> 
      <td> 
      </td> 
      <td> 
       <a href="#"> 
       Unknown receiver 
       </a> 
      </td> 
      <td id="resolvedStatus"> 
       Unresolved 
      </td> 
      <td class="align-right"> 
       <div id="infoBubble" class="js-info-bubble-parent"> 
        <div class="document-status document-status--red js-docReqAttention-bubble-toggler"> 
        <div class="js-info-bubble info-bubble info-bubble-bottom info-bubble-bottom-right" style="display: none;"> 
         <div class="info-bubble-content"> 
          <div class="document-status-bubble"> 
           additional info to be added... 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
      </td> 
     </tr> 
     <tr class="table-row-details" style="display: none;"> 
      <td class="pad-box-table-details" colspan="6"> 
       <div> 
        <ul class="styled-list"> 
        <li> How to solve the issue... </li> 
        <li> Some other solution... </li> 
        </ul> 
       </div> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

CSS КОД

.documents-container { 
    padding: 40px 37px 40px 46px; 
} 

.documents-container>a { 
    float: right; 
    margin-top: 15px; 
} 

.documents-table { 
    width: 100%; 
    margin-top: 20px; 
} 

.documents-table th, .documents-table td { 
    border-bottom: 1px solid #c3c3c3; 
} 

.documents-table th { 
    text-transform: uppercase; 
} 

.documents-table.no-text-transform th { 
    text-transform: none; 
} 

.documents-table .info-bubble.info-bubble-bottom.info-bubble-bottom-right 
    { 
    right: -32px; 
} 

.document-status { 
    display: inline-block; 
    height: 14px; 
    width: 14px; 
    cursor: pointer; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%; 
} 

.document-status--red { 
    background: #ed1b2e; 
} 

.meta { 
    color: #9d9d9d; 
    font-size: 11px; 
} 

JavaScript код

$('.js-toggle-table-details').on('click', function() { 
       var $tablerow = $(this).next('.table-row-details'); 
       $('.table-row-details').not($tablerow).hide(); 
       $($tablerow).slideToggle("slow").focus(); 
      }); 

Answer 1

Как написано в документации https://api.jquery.com/focus/, только ссылку, ввод, выберите или, может быть текстовое поле может быть с помощью этого метода, или вы должны использовать атрибут tabIndex, как показано ниже:

<tr class="with-details js-toggle-table-details" tabIndex = "1"> 

Я обновил свой jsfiddle: http://jsfiddle.net/E85pn/14/