Create a cool looking jQuery data table
In this article I’ll explain how to create a cool looking data table using jQuery…
Step 1 – HTML Page
File Name: xpand.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Data Table</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="roll_over.js"></script>
<script type="text/javascript" src="slide.js"></script>
</head>
<body>
<div class="container">
<div class="country">
<table border="0" cellpading="0" cellspacing="0">
<tr>
<td width="275" height="30"><h3>Austria</h3></td>
<td style="border-left: 1px solid #C7004A;" width="160" height="30"><div align="center"><img src="Empty_btn.png" width="125" height="21"/></div></td>
<td style="border-left: 1px solid #C7004A;" width="160" height="30"><div align="center"><h4><img src="View_btn.png" class="ro" /></h4></div></td>
<td style="border-left: 1px solid #C7004A;" width="160" height="30"><div align="center"><img src="Empty_btn.png" width="125" height="21"/></div></td>
</tr>
</table>
</div><!-- country ends -->
<div class="mv">
<table width="760" border="0" cellpading="0" cellspacing="0" >
<tr>
<td width="275" height="140" valign="top"><h3>Austria</h3><img src="Country_Bt_border.gif"/></td>
<td width="160"><div align="center"><img src="Empty_Sales_Aid.gif" width="73" height="105" alt="" /></div></td>
<td width="160"><div align="center"><img src="FPO_Sales_Aid.gif" width="73" height="105" alt="" /></div></td>
<td width="160"><div align="center"><img src="Empty_Sales_Aid.gif" width="73" height="105" alt="" /></div></td>
</tr>
<tr>
<td width="275" height="40" valign="bottom"><p>[x]close</p></td>
<td width="160"><div align="center">text</div></td>
<td width="160"><div align="center">text</div></td>
<td width="160"><div align="center">text</div></td>
</tr>
</table>
</div><!-- mv ends -->
<div class="country">
<table border="0" cellpading="0" cellspacing="0">
<tr>
<td width="275" height="30"><h3>Belgium</h3></td>
<td style="border-left: 1px solid #C7004A;" width="160" height="30"><div align="center"><h4><img src="View_btn.png" class="ro" /></h4></div></td>
<td style="border-left: 1px solid #C7004A;" width="160" height="30"><div align="center"><h4><img src="View_btn.png" class="ro" /></h4></div></td>
<td style="border-left: 1px solid #C7004A;" width="160" height="30"><div align="center"><img src="Empty_btn.png" width="125" height="21"/></div></td>
</tr>
</table>
</div><!-- country ends -->
<div class="mv">
<table width="760" border="0" cellpading="0" cellspacing="0" >
<tr>
<td width="275" height="140" valign="top"><h3>Belgium</h3><img src="Country_Bt_border.gif"/></td>
<td width="160"><div align="center"><img src="FPO_Sales_Aid.gif" width="73" height="105" alt="" /></div></td>
<td width="160"><div align="center"><img src="FPO_Sales_Aid.gif" width="73" height="105" alt="" /></div></td>
<td width="160"><div align="center"><img src="Empty_Sales_Aid.gif" width="73" height="105" alt="" /></div></td>
</tr>
<tr>
<td width="275" height="40" valign="bottom"><p>[x]close</p></td>
<td width="160"><div align="center">text</div></td>
<td width="160"><div align="center">text</div></td>
<td width="160"><div align="center">text</div></td>
</tr>
</table>
</div><!-- mv ends -->
<div class="country">
<table border="0" cellpading="0" cellspacing="0">
<tr>
<td width="275" height="30"><h3>Bulgaria</h3></td>
<td style="border-left: 1px solid #C7004A;" width="160" height="30"><div align="center"><img src="Empty_btn.png" width="125" height="21"/></div></td>
<td style="border-left: 1px solid #C7004A;" width="160" height="30"><div align="center"><img src="Empty_btn.png" width="125" height="21"/></div></td>
<td style="border-left: 1px solid #C7004A;" width="160" height="30"><div align="center"><h4><img src="View_btn.png" class="ro" /></h4></div></td>
</tr>
</table>
</div><!-- country ends -->
<div class="mv">
<table width="760" border="0" cellpading="0" cellspacing="0" >
<tr>
<td width="275" height="140" valign="top"><h3>Bulgaria</h3><img src="Country_Bt_border.gif"/></td>
<td width="160"><div align="center"><img src="Empty_Sales_Aid.gif" width="73" height="105" alt="" /></div></td>
<td width="160"><div align="center"><img src="Empty_Sales_Aid.gif" width="73" height="105" alt="" /></div></td>
<td width="160"><div align="center"><img src="FPO_Sales_Aid.gif" width="73" height="105" alt="" /></div></td>
</tr>
<tr>
<td width="275" height="40" valign="bottom"><p>[x]close</p></td>
<td width="160"><div align="center">text</div></td>
<td width="160"><div align="center">text</div></td>
<td width="160"><div align="center">text</div></td>
</tr>
</table>
</div><!-- mv ends -->
</div><!-- container ends -->
</body>
</html>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 ) { $('<img alt="" />').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
Leave a Reply