December 6th in Articles by .

Scrollable, Zebra Tables With Highlighting Rows With Chromatable and jQuery


A few days ago I had the requirements to add scrollable tables, with a static header, that was also zebra striped and would highlight the current row on hover. I was looking for a scrollable table jQuery plugin already and having played with Chromatable I decided to simply add the missing functionality with the help of jQuery. First we need to download the Chromatable plugin and then add the needed files to our HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>HTML Table</title>
		<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="javascript/jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="javascript/jquery.chromatable.js"></script>
	</head>
	<body>

	</body>
</html>

With our imports done we can add out table. Note the class, which call also be an id, on the table tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>HTML Table</title>
		<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="javascript/jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="javascript/jquery.chromatable.js"></script>
	</head>
	<body>
		<table class="scrollable">
			<thead>
				<tr>
					<th>Heading 1</th>
					<th>Heading 2</th>
					<th>Heading 3</th>
					<th>Heading 4</th>
					<th>Heading 5</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
				<tr>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
					<td>Some content</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Next we add some simple JavaScript to enable Chromatable, create a new JavaScript file called main.js inside the javascript folder and add the following:

$(document).ready(function() {
	$(".scrollable").chromatable({
		width: "900px",
		height: "200px",
		scrolling: "yes"

	});
});

When you now refresh the page you will see your plain table turn into scrollable table. With this done, let’s add the zebra tables styles. Before the days of jQuery one had to use a script such as the very popular zebra stripes script. With jQuery this all comes down to a single line. Ad the following to your main.js file:

$(".scrollable tbody tr:odd").addClass("odd");

We also need to add our CSS style for the above to work. Create a new CSS file called default.css in the css folder and add the following:

.odd
{
	background-color:#c0c0c0;
}

Reloading the page will now render a scrolllable table that has alternating row colors. Only one thing remaining, adding the on hover style. To the previous CSS file add the following:

.row_hover
{
	background-color:#333;
	color:#fff;
}

The above is then the class we will add and remove from the current hovered row using jQuery. With the style added add the following to your main.js:

$(".scrollable tbody tr").mouseover(function() {
	$(this).addClass("row_hover");
});

$(".scrollable tbody tr").mouseout(function() {
	$(this).removeClass("row_hover");
});

Refreshing the page will now render our completed scrolllable, zebra striped table that highlights the current row you hover over. To finish out table of add the following to your default.css to style our headers and give the table a solid background color:

table
{
	background-color:#fff;
	color:#000;
}
table th
{
	background-color:#666;
	color:#fff;
}

You can download the source from here or view the demo. Looking forward to your comments.

  • http://www.rankfirstplace.com KevinChin

    {i like the layout of your site, will bookmark|nice post enjoy reading it|great site & thanks for the info..will bookmark this blog|

  • http://www.rankfirstplace.com KevinChin

    {i like the layout of your site, will bookmark|nice post enjoy reading it|great site & thanks for the info..will bookmark this blog|

  • Adrian

    No demo? Hmph.

  • Adrian

    No demo? Hmph.

  • nodemo

    demo link?

  • nodemo

    demo link?

  • Miguel

    Thank you for sharing. OMG no demo! I'll have to download, extract and open index.html in a browser? :O eheh

  • Miguel

    Thank you for sharing. OMG no demo! I'll have to download, extract and open index.html in a browser? :O eheh

  • name

    demo link or stop wasting everybody's time

  • name

    demo link or stop wasting everybody's time

  • ossreleasefeed

    Sorry about the lack of a demo folks, here it is: http://expansive-derivation.ossreleasefeed.com/sc…

  • ossreleasefeed

    Sorry about the lack of a demo folks, here it is: http://expansive-derivation.ossreleasefeed.com/sc…

Performance Optimization WordPress Plugins by W3 EDGE