Demo 3 :: Highlighting

Sometimes things on a website can get a bit cluttered or have things not easily noticeable. One thing to help users easily find what they are looking for is to higlight things for them. It helps things to stand out to the user so they can see important information. Highlighting table rows is a good way to help the user sort through the table information. You can also let them click on the table to highlight specific areas.

First Name Last Name Email
John Williams jwilliams@email.com
Anne Smith asmith@email.com
Bill Goodling bgoodling@email.com
Jack Reacher jreacher@email.com
Dan Himes dhimes@email.com

View the HTML code

<table id="tableHighlight">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Williams</td>
            <td>jwilliams@email.com</td>
        </tr>
        <tr>
            <td>Anne</td>
            <td>Smith</td>
            <td>asmith@email.com</td>
        </tr>
        <tr>
            <td>Bill</td>
            <td>Goodling</td>
            <td>bgoodling@email.com</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>Reacher</td>
            <td>jreacher@email.com</td>
        </tr>
        <tr>
            <td>Dan</td>
            <td>Himes</td>
            <td>dhimes@email.com</td>
        </tr>
    </tbody>
</table>

View the jQuery code

$(document).ready(function(){
	$('#tableHighlight tbody tr:even').addClass('striping');
	$('#tableHighlight tbody tr').hover(function(){
		$(this).addClass('hover');
	}, function(){
		$(this).removeClass('hover');
	});
	$('#tableHighlight tbody td').click(function(){
		$(this).toggleClass('highlight');
	});
});