Create a cool looking jQuery data table

admin — Wed, 25 Nov 2009 09:01:49 +0000

In this article I’ll explain how to create a cool looking data table using jQuery…

Step 1 – HTML Page

File Name: xpand.html





jQuery Data Table







  
    
      
        Austria
        
        
        
      
    
  

  
    
      
        Austria
        
        
        
      
      
        [x]close
        text
        text
        text
      
    
  

  
    
      
        Belgium
        
        
        
      
    
  

  
    
      
        Belgium
        
        
        
      
      
        [x]close
        text
        text
        text
      
    
  

  
    
      
        Bulgaria
        
        
        
      
    
  

  
    
      
        Bulgaria
        
        
        
      
      
        [x]close
        text
        text
        text

Step 2 – Add Style

File Name: style.css

*          {margin: 0; padding: 0;}
body       {font-family: helvetica; font-size: 14px; font-weight: bold; color: #333;}
p          {font-size: 16px; color: #e792b1; padding: 0 0 10px 10px; cursor:pointer;}
.container {width: 760px; margin: 0 auto; padding: 50px 0 0 0;}
.country   {border-top: 1px solid #C7004A; width: 100%;}
.mv        {margin: 0; padding: 0; border-top: 1px solid #C7004A;}
img        {border: 0 none;}
h3         {padding: 5px 10px; font-size: 14px; color: #454545;}
h4	 {cursor:pointer;}

Step 3 – jQuery slider effect

File Name: slide.js

$(document).ready(function(){
	$('div.mv').hide().css('background-color', '#F7D9E4');
  	$('h4').click(function(){
  		$(this).parents("div.country").next().slideDown("slow")
  		.prev().hide(".country").next().siblings('div.mv')
  		.slideUp("slow").prev().show("div.country");
  		return false;
  	});
  	$('p').click(function(){
  		$(this).parents("div.mv").slideUp("slow")
  		.prev().css('background-color', '#FFFFFF').show(".country");
  		return false;
  	});
  	$( function(){
  		$('.country').hover( function(){
  			$(this).css('background-color', '#F7D9E4');
  		},
  		function(){
  			$(this).css('background-color', '#FFF');
  		});
	});
});

Step 3 – jQuery hover effect

File Name: roll-over.js

$(document).ready( function(){
	PEPS.rollover.init();
});
	PEPS = {};
	PEPS.rollover =
	{
		init: function(){
			this.preload();
			$(".ro").hover(
				function () { $(this).attr( 'src', PEPS.rollover.newimage($(this).attr('src')) ); },
				function () { $(this).attr( 'src', PEPS.rollover.oldimage($(this).attr('src')) ); }
			);
		},
		preload: function(){
			$(window).bind('load', function() {
				$('.ro').each( function( key, elm ) { $('').attr( 'src', PEPS.rollover.newimage( $(this).attr('src') ) ); });
			});
		},
		newimage: function( src ) { return src.substring( 0, src.search(/(\.[a-z]+)/) ) + '_o' + src.match(/(\.[a-z]+)/)[0]; },
		oldimage: function( src ){ return src.replace(/_o/, ''); }
	};

Click here to view Live Demo

Coyote Lab » jQuery