jQuery - Table Row Highlighting

The following example shows how to use jQuery and simple CSS to create a table with highlightable and clickable rows (see working example here):

<style type="text/css">
      .highlight{
        color:white;
        background-color:black;
        cursor: pointer;
      }
    </style>
    
    <table id="example" border='1'>
      <thead>
        <tr>
          <td>First Name</td>
          <td>Last Name</td>
        </tr>
      </thead>
      <tbody>
        <tr onclick="alert('John Smith')">
          <td>John</td>
          <td>Smith</td>
        </tr>
        <tr onclick="alert('Jane Doe')">
          <td>Jane</td>
          <td>Doe</td>
        </tr>
        <tr onclick="alert('Bob Squarepants')">
          <td>Bob</td>
          <td>Squarepants</td>
        </tr>
      </tbody>
    </table>
    
    <script id="vups-script" type="text/javascript">
      $(document).ready(function(){
        $("#example tbody td").hover(function() {
          $(this).parents('tr').addClass('highlight');
        }, function() {
          $(this).parents('tr').removeClass('highlight');
        });
      });
     </script>