If you are going to sell your product or services online, you must have a pricing plans so that user has to click through to purchase your services.

If you agree the above statement, You must have a Elegant Pricing Table in your website and it should offer most important information to the user.

Also you must  clearly differentiate between the features of various pricing plans and guide the user to pick the most appropriate plan.

Today we’ll have a look at some elegant pricing table using Jquery and CSS

Free Download Pricing Table JQuery and CSS

Pricing Table Using Jquery & CSS

Pricing Tables Gallery

Javascript Code

<pre>jQuery(document).ready(function($) {	
	$('.white_table td, .white_table th')
		.live('mouseenter' , function(){
			var the_parent = $('.white_table');
			the_parent.find('*').removeClass('border_blue');
			var index = $(this).index();
			the_parent.find('tr').each(function(i){
				var item = $(this);
				if(item.hasClass('grey')){
					item.find('th:eq('+index+') , td:eq('+index+')').addClass('w_table_l_grey');
				}else{
					item.find('th:eq('+index+') , td:eq('+index+')').addClass('w_table_d_grey');
				}
			});
		})
		.live('mouseleave' , function(){
			$('.white_table').find('*').removeClass('w_table_d_grey').removeClass('w_table_l_grey');
		});
		
	$('.black_table td, .black_table th')
		.live('mouseenter' , function(){
			var the_parent = $('.black_table');
			
			the_parent.find('*').removeClass('pricing_blue_btn');
			var index = $(this).index();
			the_parent.find('tr').each(function(i){
				var item = $(this);
				if(item.hasClass('grey')){
					item.find('th:eq('+index+') , td:eq('+index+')').addClass('d_table_l_grey');
				}else{
					item.find('th:eq('+index+') , td:eq('+index+')').addClass('d_table_d_grey');
				}
			});
		})
		.live('mouseleave' , function(){
			$('.black_table').find('*').removeClass('d_table_l_grey').removeClass('d_table_d_grey');
		});
});
</pre>

View Demo

Buy Pricing Tables Bundle @ 1$


PayPal — The safer, easier way to pay online.

Support

After your payment successful, you will get an email with pricingtables.zip attached sent by itzurkarthi@gmail.com within 1 hour. If you are not seeing it, check the spam folder. If you still don’t see it, send me an email and I’ll resend you again.

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
Free Pricing Tables Using Jquery & CSShttp://w3lessons.info/wp-content/uploads/2012/01/pricing-table-css3-jquery1.pnghttp://w3lessons.info/wp-content/uploads/2012/01/pricing-table-css3-jquery1-150x150.pngKarthikeyan KCSS3FreebiesjqueryWeb DesignCascading Style Sheets,CSS3,freebies,pricing table
If you are going to sell your product or services online, you must have a pricing plans so that user has to click through to purchase your services.If you agree the above statement, You must have a Elegant Pricing Table in your website and it should offer most important information...