title: Moving (highlighting) the last row in an HTML table using jQuery
body: <p>I need your help.</p>
  
  <p>How can the existing jQuery code below be modified such that, at the click of a button, I would be able to move to the last row in the html table and select (highlight) it? My way of thought was that it would be possible to get the row count, then using the row count, move the selection to the last row. I guess I was wrong because its not working :(</p>
  
  <p>Im jQuery friendly please.</p>
  
  <p>Here is the markup:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; 
  
  &lt;style type="text/css"&gt;
  
  .highlight {
  
      background-color: rgb(255,0,0);
  
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  
  window.onload = function() {
  
  var rowCount = $('#data &gt;tbody &gt;tr').length;
  
  
      var $tbody = $("#data tbody").on('click', 'tr', function() {
              highlight($(this));
      });
  
  
      $('#goto_prev').click(function() {
          var $prev = $tbody.find('.highlight').prev();
              highlight($prev);
      });
  
  
      $('#goto_next').click(function() {
          var $next = $tbody.find('.highlight').next();
              highlight($next);
      });
  
      $('#goto_last').click(function() {
              highlight(rowCount);
      });
  
      function highlight($row) {
              if ($row.length) {
                  $tbody.children().removeClass("highlight");
                  $row.addClass('highlight');
                  $("#rownum").val($row[0].rowIndex);
              }
      }
  
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table id="data" border="1" cellspacing="1" cellpadding="1"&gt;
  
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;header1&lt;/th&gt;
              &lt;th&gt;header2&lt;/th&gt;
              &lt;th&gt;header3&lt;/th&gt;
              &lt;th&gt;header4&lt;/th&gt;
              &lt;th&gt;header5&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  Row Number:
  &lt;br&gt;
  &lt;input type="text" id="rownum" readonly&gt;
  
  &lt;input type="button" id="goto_prev" value="prev"&gt;
  &lt;input type="button" id="goto_next" value="next"&gt;
  &lt;input type="button" id="goto_last" value="last"&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>