Home arrow JavaScript arrow Creating JavaScript-Based Table Rulers
JAVASCRIPT

Creating JavaScript-Based Table Rulers


Welcome to the second chapter of a series that shows you how to create table rulers with CSS and JavaScript. This series provides you with a bunch of useful pointers that hopefully will get you started incorporating appealing table rulers into your own web sites with only minor hassles.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
September 03, 2009
TABLE OF CONTENTS:
  1. · Creating JavaScript-Based Table Rulers
  2. · Review: a cross-browser table ruler with CSS and JavaScript
  3. · Building a JavaScript-based table ruler
  4. · The table ruler application’s full source code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Creating JavaScript-Based Table Rulers
(Page 1 of 4 )

Introduction

Undeniably, a table ruler is one of the handiest mechanisms that can be used on a web site to increase the usability of HTML tables that contain numerous items. It permits users to highlight visually (generally by means of a rollover effect) the row that they are currently viewing.

Naturally, this technique helps to prevent users from getting lost when reading data in large tables. It can be implemented in a great variety of ways, ranging from using CSS and JavaScript separately, to utilizing a balanced combination of them, particularly where it’s necessary to address certain browser incompatibilities.

So, if you’re a web designer who’s seeking an approachable guide on how to build a table ruler by using a combination of CSS and JavaScript, you've come to the right place. First I will review the ground we covered in the previous article, and then we'll go over some new methods for creating a table ruler. 

In the preceding article of the series, I demonstrated how to create a simple table ruler by utilizing a mixture of CSS and JavaScript. This combination will work correctly with many modern browsers. In simple terms, this table ruler was capable of changing the background color of each row within a selected HTML table. This happened every time a user placed the mouse over each row, in this manner increasing the table’s overall readability.

As I said earlier, it’s possible to use different approaches to construct a table builder like the one described above. Therefore, in this second tutorial I’ll be explaining how to build this handy mechanism by means of unobtrusive JavaScript, which will function with most popular browsers as well.

Now, it’s time to see how this JavaScript-based table ruler can be created in a few simple steps. Let’s get started!


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials