<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<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>
<td>Email</td>
</tr>
</thead>
<tbody>
<tr onclick="alert('John Smith')">
<td>John</td>
<td>Smith</td>
<td>John.Smith@gmail.com</td>
</tr>
<tr onclick="alert('Jane Doe')">
<td>Jane</td>
<td>Doe</td>
<td>Jane.Doe@gmail.com</td>
</tr>
<tr onclick="alert('Bob Squarepants')">
<td>Bob</td>
<td>Squarepants</td>
<td><a href="Bob.Squarepants@gmail.com">Bob.Squarepants@gmail.com</a></td>
</tr>
</tbody>
</table>
</html>
<script id="vups-script" type="text/javascript">
$(document).ready(function(){
$("#example tbody tr td").mouseover(function() {
$(this).addClass('highlight');
});
$("#example tbody tr td").mouseout(function() {
$(this).removeClass('highlight');
});
});
</script>