title: perform click or focus in table row in jquery
body: <p>please consider this codes:</p>
  
  <p>I have a table like this:</p>
  
  <pre><code>&lt;table class="ArrowNav" cellspacing="0" rules="all" border="1" id="GridView1" style="height:302px;width:692px;border-collapse:collapse;"&gt;
      &lt;tr&gt;
          &lt;th class="Id" scope="col"&gt;Id&lt;/th&gt;&lt;th scope="col"&gt;"Group&lt;/th&gt;&lt;th scope="col"&gt;Value&lt;/th&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;1&lt;/td&gt;&lt;td align="center" valign="middle"&gt;1&lt;/td&gt;&lt;td align="center" valign="middle"&gt;100&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;2&lt;/td&gt;&lt;td align="center" valign="middle"&gt;1&lt;/td&gt;&lt;td align="center" valign="middle"&gt;120&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;3&lt;/td&gt;&lt;td align="center" valign="middle"&gt;1&lt;/td&gt;&lt;td align="center" valign="middle"&gt;100&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;4&lt;/td&gt;&lt;td align="center" valign="middle"&gt;2&lt;/td&gt;&lt;td align="center" valign="middle"&gt;90&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;5&lt;/td&gt;&lt;td align="center" valign="middle"&gt;2&lt;/td&gt;&lt;td align="center" valign="middle"&gt;105&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;6&lt;/td&gt;&lt;td align="center" valign="middle"&gt;3&lt;/td&gt;&lt;td align="center" valign="middle"&gt;300&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;7&lt;/td&gt;&lt;td align="center" valign="middle"&gt;4&lt;/td&gt;&lt;td align="center" valign="middle"&gt;123&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;8&lt;/td&gt;&lt;td align="center" valign="middle"&gt;4&lt;/td&gt;&lt;td align="center" valign="middle"&gt;110&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;9&lt;/td&gt;&lt;td align="center" valign="middle"&gt;5&lt;/td&gt;&lt;td align="center" valign="middle"&gt;100&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td align="center" valign="middle"&gt;10&lt;/td&gt;&lt;td align="center" valign="middle"&gt;5&lt;/td&gt;&lt;td align="center" valign="middle"&gt;110&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and I write a script for navigate between rows :</p>
  
  <pre><code>var SelectedRowIndex;
  
      $(document).ready(function () {
          $('.ArrowNav tr').first().css('background-color', 'yellow');
          //            $('.ArrowNav tr').first().focus();
          $('.ArrowNav tr:first').first().trigger('click');
          SelectedRow = 0;
  
          function ResetAllRowColor() {
              $('.ArrowNav tr').each(function () {
                  $(this).css('background-color', 'white');
              });
          }
  
          $('.ArrowNav tr').on('keyup', function (e) {
              ResetAllRowColor();
              switch (e.keyCode) {
                  case 40: //Down
                      SelectedRow++;
                      $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
                      break;
                  case 38: //Up
                      SelectedRow--;
                      $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
                      break;
              }
          });
  
          $('.ArrowNav tr').on('click', function () {
              alert('a');
          });
      });
  </code></pre>
  
  <p>the problem is for navigating the table must have focus on it.I write this code for set focus: <code>$('.ArrowNav tr').first().focus();</code> but it didn't work.I also write this code : <code>$('.ArrowNav tr:first').first().trigger('click');</code> but click event on rows does not fire.I want in page load I can navigate between rows buy arrow keys. where is the problem? </p>
  
  <p><a href="http://jsfiddle.net/8esyG/" rel="nofollow">jsfiddle</a></p>
  
  <p>thanks</p>