Creating Table Rulers with the jQuery JavaScript Library

Introduction

As a web developer, you know that there are many mechanisms that can be used on a web site to highlight certain sections of it, either for making them look a bit more attractive, or for providing users with a visual aid that contributes to the site’s usability.

Certainly, table rulers fall under this last category. They're utilized by many web sites nowadays when it’s necessary to display large portions of tabular data. In a case like this, a table ruler permits users to easily highlight sections of a selected HTML table every time the mouse is placed over each of its rows.

Thus, if you’re interested in learning how to build a table ruler in a simple fashion, which can be incorporated to your own web site with minor hassles, then look no further, because you’ve come to the right place.

Now, returning to the topics covered in the previous article, I left off discussing how to develop a basic JavaScript-based table ruler that was capable of working with multiple HTML tables. Indeed, creating a JavaScript program like this was a no-brainer process, since it required only using a bit of DOM scripting to attach the table ruler to a couple of sample tables. It was that simple, really.

However, this educational journey hasn’t finished yet, since in the next few lines I plan to teach you how to build a table ruler with the assistance of the jQuery JavaScript package. This approach can be pretty useful, particularly if you’re currently using this framework to develop your client-side web applications.

Now that you know what to expect from this last installment of this series, it’s time to see how jQuery can be utilized for building an efficient table ruler. Let’s get going!